vue.nextTick的作用

最新推荐文章于 2023-09-13 15:28:16 发布

原创最新推荐文章于 2023-09-13 15:28:16 发布 · 356 阅读

CC 4.0 BY-SA版权

文章标签：

8 篇文章

订阅专栏

博客讲述了在Vue开发中遇到的DOM更新问题，分析了Vue的异步更新队列机制，提出了解决方法，包括使用setTimeout和Vue的$nextTick()。重点强调了在数据变化后等待DOM更新的重要性，特别是在涉及DOM操作的场景如Echarts图表渲染时。

几年前，刚刚开始写vue的时候遇到了dom更新的问题，以下是当时的笔记，觉得当时挺有意思的。

通过查看控制台console，用jq获取dom总是会慢一步：即获取上一次渲染的dom；用原生js获取dom，看起来可以获取到当前变化后的dom；

但是问题来了！控制台看起来 console 出的个数，跟实际的个数一样，但是console它的length和jq获取的length还是一样的！js无法取得最后一个新生成的dom元素！

在vue项目中，vue监听data的变化，更新dom；通过控制台直接console，第二步获取dom，更新data，而第三步dom才开始更新，每次打印时dom还未更新，所以取得的就是更新前的dom；与用jq还是js没有关系。

方法一、给获取dom的方法增加一个定时器setTimeout（fn，100），等到dom更新之后再进行console，就可以了。

方法二、查看vue方法，得到一个vue的this.$nextTick()方法，该方法将回调延迟到下次dom更新循环之后执行。

在修改数据之后立即使用，然后等到dom更新后执行。

我们在项目中有时会遇到需要获取dom的情况，比如echarts。但往往数据更新完成，并不意味着dom元素也渲染完成，所以我们需要一种方法，使得dom元素循环更新以后，在执行接下来的回调函数，这就是 nextTick。

//1、修改数据

vm.msg = 'Hello'

//2、DOM 未更新

Vue.nextTick(function () {
  
    //3、DOM 更新了

})

不积跬步无以至千里，不积小流无以成江海。加油！