第十二章、实例方法与全局API的实现原理（2）

vm.$nextTick

• nextTick接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新周期之后执行。
• 如果没有提供回调且在支持Promise的环境中，则返回一个Promise

使用场景：

当更新了状态（数据）后，需要对新DOM做一些操作，但是这时候我们还获取不到更新后的DOM，因为还没有重新渲染。

new Vue({
	// ...
	methods:{
		// ...
		example1:function(){
			// 先修改数据
			this.message = 'changed'
			// 然后使用nextTick注册回调
			this.$nextTick(function() {
				// DOM现在已经更新了
			})
		},
		example2:function() {
			// 先使用setTimeout向宏任务中注册回调
			setTimeout(()=>{
				// DOM现在更新了
			},0)
			// 然后修改数据向微任务中注册回调
			this.message = 'changed'
		}
	}
})

因此我们需要搞清楚以下几个问题：

• 下次DOM更新周期是指什么时候？

    下次DOM更新周期即下次微任务执行时更新DOM。
    vm.$nextTick默认将回调任务添加到微任务队列中，只有在特殊情况下才会降级成宏任务。

• 为什么Vue.js使用异步更新队列

    因为Vue.js从2.0开始使用虚拟DOM渲染视图，变化侦测的通知只发送到组件级别，组件内的所有状态的变化东辉通知到同一个watcher，然后虚拟DOM会对整个组件进行比对并重新渲染。

• 什么是事件循环？