vue3 nextTick源码探究

nextTick介绍

nextTick简单来说就是在dom元素渲染完成后去执行的函数
深层级来讲，就是vue3的异步更新策略，实现原理是使用 promise.resolve().then(cb) 将cb添加到微任务队列中（准确添加到组件更新函数之后），在组件更新函数执行后，patch也就执行了，dom元素也就更新了，自然再执行cb的时候可以拿到最新的状态

写上一个案例

<script src="../dist/vue.global.js"></script>

<div id="app">
  <h1>vue3 nextTick</h1>
  <div ref="counterRef">{{ counter }}</div>
</div>

<script>
Vue.createApp({
  setup() {
    const counterRef = Vue.ref(null)

    const counter = Vue.ref(0)

    Vue.onMounted(() => {
      console.log(counterRef.value.innerText) // 0
      counter.value ++
      Vue.nextTick(() => {
        console.log(counterRef.value.innerText) // 1
      })
    })

    return {
      counterRef,
      counter
    }
  }
}).mount("#app")
</script>
 

读源码

function nextTick(fn) {
	// currentFlushPromise 一个插值的过程
	// 所以nextTick的原理就是promise.then(cb)
  const p = currentFlushPromise || resolvedPromise
  return fn ? p.then(this ? fn.bind(this) : fn) : p
}

function queueFlush() {
    if (!isFlushing || isFlushPending) {
        isFlushPending = true 
        currentFlushPromise = resolvePromise.then(flushJobs)    
    }
}

一个疑问：vue3自己维护的队列queue 和 微任务队列有什么关系嘛
自己维护的队列的执行方法是微任务队列中的其中一个项