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的流程就是:
- 把回调函数放入callbacks等待执行
- 将执行函数放到微任务或者宏任务中
- 事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调
参考链接:https://juejin.cn/post/6844904147804749832
标签:nextTick,函数,DOM,callbacks,任务,理解,msg,原理 From: https://www.cnblogs.com/it-girl-maxiaotiao/p/17418699.html