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.元素
})

总结：

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

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