for(let i=1; i<=100; i++){
	console.log(i);
}

// src/core/observer/watcher.js
class Dep {
	notify() {
  	//subs是Watcher的实例数组
  	const subs = this.subs.slice()
    for(let i=0, l=subs.length; i<l; i++){
    	subs[i].update()
    }
  }
}

class Watcher {
	update() {
  	...
  	//各种情况判断之后
    else{
    	queueWatcher(this)
    }
  }
}

//queueWatcher 定义在 src/core/observer/scheduler.js
const queue: Array<Watcher> = []
let has: { [key: number]: "htmlcode">

const callbacks = []
let pending = false

export function nextTick (cb"htmlcode">

let timerFunc

if (typeof Promise !== 'undefined' && isNative(Promise)) {
 const p = Promise.resolve()
 timerFunc = () => {
  p.then(flushCallbacks)
  if (isIOS) setTimeout(noop)
  }
 isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
 isNative(MutationObserver) ||
 // PhantomJS and iOS 7.x
 MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
 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)) {
 timerFunc = () => {
  setImmediate(flushCallbacks)
 }
} else {
 timerFunc = () => {
  setTimeout(flushCallbacks, 0)
 }
}



timerFunc下面一大片if else是在判断不同的设备和不同情况下选用哪种特性去实现异步任务：优先检测是否原生"htmlcode">

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





var vm = new Vue({
 el: '#example',
 data: {
  message: '123'
 }
})
vm.message = 'new message' // 更改数据

vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
 vm.$el.textContent === 'new message' // true
})



并且因为$nextTick() 返回一个 Promise 对象，所以也可以使用async/await 语法去处理事件，非常方便。
以上就是详解Vue的异步更新实现原理的详细内容，更多关于vue 异步更新的资料请关注其它相关文章！