Vue异步更新队列及nextTick

最新推荐文章于 2024-06-19 00:30:00 发布

weixin_34297300

最新推荐文章于 2024-06-19 00:30:00 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：https://juejin.im/post/5c54113ef265da2dbe02b8f4

本文深入探讨了Vue.js的数据驱动理念，解析其如何通过异步队列机制高效处理DOM更新，避免不必要的渲染，从而提升应用性能。并介绍了Vue提供的nextTick函数，用于确保在DOM更新后执行特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM。Vue的dom更新是异步的，当数据发生变化，vue并不是里面去更新dom，而是开启一个队列。跟JavaScript原生的同步任务和异步任务相同。

比如我们调用一个方法，同时涉及多个数据的操作改变，vue会把这一些列操作推入到一个队列中，相当于JavaScript的同步任务，在执行过程中可能会出现一些产生任务队列的异步任务，比如定时器、回调等。

在vue里面任务队列也叫事件循环队列。我们都知道JavaScript是循环往复的执行任务队列。Vue也一样，在一个同步任务过程中是不会去更新渲染视图，而是在同步任务（事件循环队列）执行完毕之后，在主线程的同步执行完毕，读取任务队列时更新视图。

这个机制对于页面性能是非常重要的，试想一下，我们要是每操作一个数据就更新一次视图，那么在性能上会非常差。而如果是在一次任务执行完毕之后更新视图，可以避免特别多的重复操作。

在开发过程中，我们很容易遇见需要先渲染数据然后操作dom，这时候就要使用vue提供的nextTick函数。

对于这个函数有这样两句话：

Vue.nextTick(callback)，当数据发生变化，更新后执行回调。 Vue.$nextTick(callback)，当dom发生变化，更新后执行的回调。

我测试了很多例子，最后还是只实现了dom的变化，对于第一句没有实现：

<p id="msg">{{msg}}</p>
<button @click="add">加</button>

add(){
  this.msg = 'have';
  console.log(document.getElementById('msg').innerHTML);
  this.$nextTick(() => {
      console.log(document.getElementById('msg').innerHTML);
  });
}
复制代码

第一个输出no,在nextTick函数里面输出have。

这个函数就是有了数据之后，渲染完成之后会执行，也就是说当你需要数据先渲染，然后去操作渲染完成之后的dom，要把操作dom的逻辑写在这个函数里面。

最后分享两个术语：macro-task和micro-task，也就是主线程和能产生子线程的函数。

macro-task:script(script标签里面的整体代码) setTimeout、setInterval、setImmediate、I/O、UI rendering。 micro-task:process.nextTick,Promise,MutationObserver。

欢迎关注Coding个人笔记公众号

转载于:https://juejin.im/post/5c54113ef265da2dbe02b8f4