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 From: https://www.cnblogs.com/ccKing/p/16624262.html