526互联

对$nextTick的理解，及其实现原理

发布时间 2023-05-21 15:51:16作者: 写代码的马小跳

1.对$nextTick的理解：

VUE中数据变化后，是异步更新DOM的，如果想数据变化后，操作dom，这个时候获取到的是没有变化的值

　　　　eg：

<div class="msg">
        {{msg}}
    </div>


 mounted(){
        this.msg = '我是测试文字'
        console.log(document.querySelector('.msg').offsetHeight) //0
 }

　　

　　为了在数据更新操作之后操作DOM，我们可以在数据变化之后立即使用Vue.nextTick(callback)；这样回调函数会在DOM更新完成后被调用，就可以拿到最新的DOM元素了。

　　eg：

this.msg = '我是测试文字'
this.$nextTick(()=>{
    console.log(document.querySelector('.msg').offsetHeight) // 20
})
　　$nextTick() 会返回一个 Promise 对象，可以是用async/await完成相同作用的事情

2.$nextTick的实现原理：

　　　　外层定义了三个变量：callbacks 放任务队列；pending 用来标识同一个时间只能执行一次；timerFunc函数：把callBack里的值放入微任务或者宏任务中去执行【这里的细节是：把callbacks数组复制一份放到flushCallbacks里，然后把callbacks置为空，最后把把复制出来的数组flushCallbacks中的每个函数依次执行一遍】

　　所以 整体nextTick的流程就是：

  1. 把回调函数放入callbacks等待执行
  2. 将执行函数放到微任务或者宏任务中
  3. 事件循环到了微任务或者宏任务，执行函数依次执行callbacks中的回调

　　参考链接：https://juejin.cn/post/6844904147804749832