vue2的nextTick使用

1、关于nextTick。

vue中的Dom更新是异步的，是异步的意味着当被处理数据是动态变化时，此时对应的Dom未能及时更新（同步更新）就会导致数据已经更新（model层已经更新）而视力层未更新（Dom未更新）此时就需要使用nextTick了。
当你想要拿到更新后的Dom，一定要在nextTic的回调函数中去获取更新后的Dom的值。
如`this.$nextTick(()=>{})

this.$nextTick(()=>{
 在这里获取dom更新后的值
})

注意：在下次Dom更新循环之后去执行回调函数，修改model层数据之后，立即在这个回调中获取更新后的dom。
回调的调用时机：需要在视图更新之后，基于新的视图上进行操作。

 1   featchData(val) {
 2       this.$nextTick(async () => {
 3         const re = await getHeader($.param(val));
 4         this.recursionFunction(re.datas.records);
 5         this.treerData = re.datas.records;
 6 
 7         // 取父级传过来的id,取不到就从本地缓存取
 8         if (this.$route.query.row.id) {
 9           this.fatherId = this.$route.query.row.id;
10         } else {
11           this.fatherId = localStorage.getItem("cloudRow");
12         }
13         // 获取之前保存的sheet数据
14         let res = await obtainContext(this.fatherId);
15         // 判断 不为空 再赋值
16         if (res.datas.context != "") {
17           this.initializationSheetData = JSON.parse(res.datas.context);
18         }
19       });
20     },

修改数据后Model层会立即同步更新了，而Dom并没有及时更新，而在回调函数中的Dom的值是更新后的，那么回调函数到底做了什么 呢，在数据变化之后立即使用this.$nextTick(callback),callback又称延迟回调，而此回调在dom更新完成后就会自动调用（它会等待Dom更新完成）。

标签：nextTick,Dom,更新,re,vue2,使用,回调,datas
来源： https://www.cnblogs.com/ccKing/p/16624262.html