nextTick实现原理 微任务

什么是nextTick?

定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

看完这个定义不免心生疑问：

• 下次 DOM 更新循环结束之后是什么时候?
• 执行延迟回调?
• 更新后的 DOM?

基于以上问题和平时的使用经验可以基本解答疑问：

• vue 更新DOM的策略是异步更新
• nextTick 可以接收一个函数做为入参
• nextTick 后能拿到最新的数据

那么nextTick 是怎么实现的呢？既然是异步更新，这涉及到了 js 的执行机制，下面一起复习一下js执行机制。

【VUE3源码学习】nextTick 实现原理_vue3銝要exttick_Chx.zhang的博客-CSDN博客

概念：
nextTick就是一个异步方法。nextTick 方法主要是使用了宏任务和微任务（事件循环机制），定义了一个异步方法，多次调用 nextTick 会将方法存入 队列中，通过这个异步方法清空当前队列。 所以这个 nextTick 方法就是异步方法 。

nextTick是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。所有放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

使用nextTick保证当前视图渲染完成。

promise是浏览器内部自己实现的一个微任务，内部使用的不是setTimeout，详细请看面试题中的promise总结。
 

vue核心面试题（nextTick实现原理）_面试题 vue $nexttick是什么原理_王三六的博客-CSDN博客

1 首先，在组件中引入nextTick方法。可以使用以下代码进行引入：

import { nextTick } from 'vue'

2 然后，在需要使用$nextTick功能的地方，调用nextTick方法。例如，在异步函数内部等待DOM更新后执行某个操作，可以使用以下代码：

setup() {
  const changeMessage = async newMessage => {
    message.value = newMessage
    await nextTick()
    console.log('Now DOM is updated')
  }
}

 3 另外，如果在普通的方法中使用$nextTick，在setup函数中可以这样写：

setup() {
  let otherParam = reactive({ showA: false })
  nextTick(() => {
    otherParam.showA = true
  })
  return { otherParam }
}

总结起来，Vue 3.0中使用$nextTick的方法是通过引入nextTick方法，并在需要的地方调用该方法来等待DOM更新。这样可以确保在DOM更新完成后执行相应的操作。

Vue 3.0中的nextTick是微任务。微任务是指不进入主线程，而进入任务队列的任务。在Vue中，nextTick方法用于在DOM更新之后执行回调函数，以确保在DOM更新完成后再执行相关逻辑。因此，Vue 3.0中的nextTick被归类为微任务。