vue nexttick的理解和使用场景讲解明白

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

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

nextTick原理
1、异步说明
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新
2、事件循环说明
简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

created、mounted
在 created 和 mounted 阶段，如果需要操作渲染后的试图，也要使用 nextTick 方法。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

1. 
   
2. mounted: function () {
   
3.   this.$nextTick(function () {
   
4.     // Code that will run only after the
   
5.     // entire view has been rendered
   
6.   })
   
7. }

复制代码

以下使用nexttick的三种情况
1、点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。

1. showsou(){
   
2.   this.showit = true //修改 v-show
   
3.   document.getElementById("keywords").focus()  //在第一个 tick 里，获取不到输入框，自然也获取不到焦点
   
4. }

复制代码

修改为：

1. 
   
2. showsou(){
   
3.   this.showit = true
   
4.   this.$nextTick(function () {
   
5.     // DOM 更新了
   
6.     document.getElementById("keywords").focus()
   
7.   })
   
8. }

复制代码

2、点击获取元素宽度。

1. 
   
2. <div id="app">
   
3.     <p ref="myWidth" v-if="showMe">{{ message }}</p>
   
4.     <button @click="getMyWidth">获取p元素宽度</button>
   
5. </div>
   
6. 
   
7. getMyWidth() {
   
8.     this.showMe = true;
   
9.     //this.message = this.$refs.myWidth.offsetWidth;
   
10.     //报错 TypeError: this.$refs.myWidth is undefined
    
11.     this.$nextTick(()=>{
    
12.         //dom元素更新后执行，此时能拿到p元素的属性
    
13.         this.message = this.$refs.myWidth.offsetWidth;
    
14.   })
    
15. }

复制代码

3、使用 swiper 插件通过 ajax 请求图片后的滑动问题。

参考阅读：
https://segmentfault.com/a/1190000012861862?utm_source=tag-newest