Vue源码解析之Next-Tick

什么是Next-Tick？

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即调用这个方法，获取更新后的DOM。

js运行机制

js执行是单线程的，基于事件循环，事件循环大致分为以下几个步骤：

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件，可以看出，这个任务队列主要存放异步任务的

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

异步说明

简单来说异步执行的运行机制：

• 所有同步任务在主线程执行，形成一个执行栈
• 主线程之外存在一个任务队列，用于存异步任务运行结果事件
• 执行栈所有同步任务执行完毕，系统就会任务队列里面事件
• 主线程重复上面动作

事件循环说明

简单来说，Vue在修改数据后，视图不会立即更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新

nextTick用途

应用场景：需要在视图更新之后，基于新的视图进行操作

• 注意：在created和mounted阶段，如果需要操作渲染后的视图，也要使用nextTick 方法。

官方文档说明： 注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

mounted: function () {this.$nextTick(function () {// Code that will run only after the// entire view has been rendered})
} 

其他应用场景

• 点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。

// 会报错，修改为 nextTick
showsou(){this.showit = true //修改 v-showdocument.getElementById("keywords").focus()//在第一个 tick 里，获取不到输入框，自然也获取不到焦点
}

// 修改
showsou(){this.showit