vue-$nextTick用法和使用场景

概念

• this.$nextTick () 将回调延迟到下次DOM更新循环之后执行，视图更新之后。

• 在修改数据之后立即使用它，然后等待DOM更新，DOM渲染再快也是需要时间的。

解决方案

this.$nextTick(()=> {
// 需要执行的操作
})

使用场景

1.data中有个值是a=111，当我们在methods中先修改a=222，在打印值时。发现还是a=111,

DOM更新再快也要时间，this.$nextTick () 回调函数在dom更新之后在执行。

2.creater () {} 是在页面渲染之前执行，这时候用$refs获取元素是undefinde，因为dom还没开始渲染

// created 里面写一个这个就可以获取到dom元素
this.$nextTick(()=> {
// 需要执行的操作
this.$refs.元素
})

3.父组件给子组件传递值时，每次触发把0改成1，会导致第二次子组件侦听不到，因为第二次1改成1察觉不到变化，这是可以每次先改0等DOM渲染更新完在改成1

// 每次执行先改0
// DOM更新完
this.$nextTick(()=> {
// 再改1
})

4.树结构默认选中时，接口掉完数据等DOM渲染完毕在执行默认选中-不然会报错（树结构还没渲染完）

---

总结：

经过这一趟流程下来相信你也对 vue-$nextTick用法和使用场景 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

有什么不足的地方请大家指出谢谢 -- 風过无痕