对nextTick的理解

nextTick是干什么的?

页面的DOM还未渲染,这个时候也没有办法操作dom,如果想操作dom,需要使用nextTick 来解决这个问题

实现原理:nextTick 的核心是利用了如Promise,setTimeout的原生js方法来模拟对应的微/宏任务的实现,本质是为了利用js的这些异步回调任务队列来实现vue框架中自己的异步回调队列

使用场景:

1.在数据变化后执行的某个操作,而这个操作需要使用随数据变化而变化的dom结构的时候,这个操作就需要方法在回调函数中

2.在vue生命周期中,如果在created()钩子进行dom操作,也一定要放在回调函数中

使用方法

this.$nextTick(() => {
  // 获取数据的操作...
})

小结:

1.把回调函数放入callbacks等待执行

2.将执行函数方法微任务或者宏任务中

3.事件循环到了微任务或者宏任务,执行函数一执行,callbacks中的回调