nextTick与eventloop

nextTick

官方解释：将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它

比如我们有下面的需求:

• 点击一个按钮，我们会修改在h2中显示的message;
• message被修改后，获取h2的高度;

实现上面的案例我们有三种方式:

• 方式一:在点击按钮后立即获取到h2的高度(错误的做法)
• 方式二:在updated生命周期函数中获取h2的高度(但是其他数据更新，也会执行该操作)
• 方式三:使用nexttick函数;

eventloop、任务队列

DOM事件、setTimeout等会被放入任务队列，任务队列又分为2种：

• 微任务队列（优先级高）：Promise.resolve().then(回调函数)
• 宏任务队列（优先级低）：DOM事件、setTimeout

Vue中的：

• watch(,回调函数)：preQueue
• 组件更新 update：jobQueue
• 生命周期回调：postQueue

nextTick 会将其中回调放入微任务队列最后！