原文：https://segmentfault.com/a/1190000012861862
1、官方说明
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即调用这个方法，获取更新后的DOM。
2、异步说明
简单来说异步执行的运行机制：
- 所有同步任务在主线程执行，形成一个执行栈
- 主线程之外存在一个任务队列，用于存异步任务运行结果事件
- 执行栈所有同步任务执行完毕，系统就会任务队列里面事件
- 主线程重复上面动作
3、事件循环说明
简单来说，Vue在修改数据后，视图不会立即更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新
4、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
})
}
5、其他应用场景
-
点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。
// 会报错，修改为 nextTick showsou(){ this.showit = true //修改 v-show document.getElementById("keywords").focus() //在第一个 tick 里，获取不到输入框，自然也获取不到焦点 } // 修改 showsou(){ this.showit = true this.$nextTick(function () { // DOM 更新了 document.getElementById("keywords").focus() }) } -
点击获取元素宽度。
<div id="app"> <p ref="myWidth" v-if="showMe">{{ message }}</p> <button @click="getMyWidth">获取p元素宽度</button> </div> getMyWidth() { this.showMe = true; //this.message = this.$refs.myWidth.offsetWidth; //报错 TypeError: this.$refs.myWidth is undefined this.$nextTick(()=>{ //dom元素更新后执行，此时能拿到p元素的属性 this.message = this.$refs.myWidth.offsetWidth; }) } 使用 swiper 插件通过 ajax 请求图片后的滑动问题。
