vm.$nextTick
- nextTick接收一个回调函数作为参数,它的作用是将回调延迟到下次DOM更新周期之后执行。
- 如果没有提供回调且在支持Promise的环境中,则返回一个Promise
使用场景:
当更新了状态(数据)后,需要对新DOM做一些操作,但是这时候我们还获取不到更新后的DOM,因为还没有重新渲染。
new Vue({
// ...
methods:{
// ...
example1:function(){
// 先修改数据
this.message = 'changed'
// 然后使用nextTick注册回调
this.$nextTick(function() {
// DOM现在已经更新了
})
},
example2:function() {
// 先使用setTimeout向宏任务中注册回调
setTimeout(()=>{
// DOM现在更新了
},0)
// 然后修改数据向微任务中注册回调
this.message = 'changed'
}
}
})
因此我们需要搞清楚以下几个问题:
- 下次DOM更新周期是指什么时候?
下次DOM更新周期即下次微任务执行时更新DOM。
vm.$nextTick默认将回调任务添加到微任务队列中,只有在特殊情况下才会降级成宏任务。
- 为什么Vue.js使用异步更新队列
因为Vue.js从2.0开始使用虚拟DOM渲染视图,变化侦测的通知只发送到组件级别,组件内的所有状态的变化东辉通知到同一个watcher,然后虚拟DOM会对整个组件进行比对并重新渲染。
- 什么是事件循环?