<div id="app"> {{ message }} </div>

const vm = new Vue({
  el: '#app',
  data: {
    message: '原始值'
 }
})

this.message = '修改后的值1' 
this.message = '修改后的值2' 
this.message = '修改后的值3'

console.log(vm.$el.textContent) // 原始值

{{num}} 
for(let i=0; i<100000; i++){ 
  num = i 
}

// 修改数据
vm.message = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始的值
Vue.nextTick(function () {
 // DOM 更新了
  console.log(vm.$el.textContent) // 修改后的值
})

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
this.$nextTick(function () {
    console.log(this.$el.textContent) // => '修改后的值'
})

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'
await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'

export function nextTick(cb?: Function, ctx?: Object) {
 let _resolve;
 // cb 回调函数会经统一处理压入 callbacks 数组
 callbacks.push(() => {
 if (cb) {
 // 给 cb 回调函数执行加上了 try-catch 错误处理
 try {
 cb.call(ctx);
 } catch (e) {
 handleError(e, ctx, 'nextTick');
 }
 } else if (_resolve) {
 _resolve(ctx);
 }
 });
 // 执行异步延迟函数 timerFunc
 if (!pending) {
    pending = true;
 timerFunc();
 }
 // 当 nextTick 没有传入函数参数的时候，返回一个 Promise 化的调用
 if (!cb && typeof Promise !== 'undefined') {
 return new Promise(resolve => {
      _resolve = resolve;
 });
 }
}

export let isUsingMicroTask = false
if (typeof Promise !== 'undefined' && isNative(Promise)) {
 //判断1：是否原生支持Promise
 const p = Promise.resolve()
 timerFunc = () => {
 p.then(flushCallbacks)
 if (isIOS) setTimeout(noop)
 }
 isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
 isNative(MutationObserver) ||
 MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
 //判断2：是否原生支持MutationObserver
 let counter = 1
 const observer = new MutationObserver(flushCallbacks)
 const textNode = document.createTextNode(String(counter))
 observer.observe(textNode, {
 characterData: true
 })
 timerFunc = () => {
    counter = (counter + 1) % 2
 textNode.data = String(counter)
 }
 isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
 //判断3：是否原生支持setImmediate
 timerFunc = () => {
 setImmediate(flushCallbacks)
 }
} else {
 //判断4：上面都不行，直接用setTimeout
 timerFunc = () => {
 setTimeout(flushCallbacks, 0)
 }
}

function flushCallbacks () {
  pending = false
 const copies = callbacks.slice(0)
 callbacks.length = 0
 for (let i = 0; i < copies.length; i++) {
    copies[i]()
 }
}