Vue异步更新队列及nextTick

Bertha 。 2022-10-01 10:49 127阅读 0赞

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