快捷導(dǎo)航

Vue3 的批量渲染機制的兩種方法

更新時間：2025年10月30日 11:26:44 作者：CptW

本文主要介紹了Vue3 的批量渲染機制的兩種方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

// effectA
effect(() => {
  console.log('A:', a.value)
  if (a.value > 5) {
    // 2、再觸發(fā)第2次 effectB
    b.value = a.value * 2
  }
})

// effectB
effect(() => {
  console.log('B:', b.value)
})

// 1、更新dep, 觸發(fā)1次 effectA 和 1次 effectB
a.value = 6
// 實際 effectB 只會執(zhí)行 1 次，而不是 2 次

btn.onclick = () => {
  count.value++
  count.value++
  count.value++
  count.value++
}

return () => {
  console.log('render call')
  return h('div', `count: ${count.value}`)
}
// 點擊按鈕，實際 'render call' 只會被打印1次

如何實現(xiàn)的？簡寫源碼 來說明： PS: 不熟悉響應(yīng)式基礎(chǔ)的，請移步往期文章

effect的批處理

修改響應(yīng)式變量的值后，會觸發(fā) setter 里的函數(shù) trigger，之后會沿著鏈表通知所有 effect：

export function traggerRef(dep: RefImpl) {
  ......
    propagate(dep.subs)
  ......
}

/** 傳播更新 */
export function propagate(subs: Link) {
  // 鏈表節(jié)點
  let link = subs
  // 收集 effect
  const queuedEffect = []
  while (link) {
    const sub = link.sub
    // 標(biāo)記 dirty，防止重復(fù)觸發(fā) effect
    if (!sub.tracking && !sub.dirty) {
      sub.dirty = true
      // ......
      queuedEffect.push(sub)
      // ......
    }
    // 遍歷鏈表
    link = link.nextSub
  }

  // 通知 effect 執(zhí)行
  queuedEffect.forEach(effect => effect.notify())
}

可以看到 sub 里有一個 dirty 屬性，如果同一次回調(diào)函數(shù)中，多次觸發(fā) sub，它只會被放入待執(zhí)行列表 1 次，也就是不會多次執(zhí)行。

注意，dirty 標(biāo)志位會等 Effect 真正執(zhí)行完成后才重置。

異步渲染render

mount組件的流程是：使用VNode創(chuàng)建組件實例instance -> 掛載到DOM -> 更新，組件實際上就是創(chuàng)建了一個 Effect 來訂閱更新：

const mountComponent = (vnode, container, anchor) => {
    /**
     * 1、創(chuàng)建組件實例
     * 2、初始化狀態(tài)
     * 3、掛載到DOM
     */
    // 1 實例化
    const instance = createComponentInstance(vnode)
    // 2 初始化
    setupComponent(instance)

    const componentUpdateFn = () => {
      // 首次掛載
      if (!instance.isMounted) {
        // 得到 Virtual DOM
        const subTree = instance.render()
        // 3 掛載
        patch(null, subTree, container, anchor)
        // 保存當(dāng)前 V-DOM
        instance.subTree = subTree
        // 修改標(biāo)志位
        instance.isMounted = true
      } else {
        // 更新
        const preSubTree = instance.subTree
        // 獲取新的 V-DOM
        const subTree = instance.render()
        // 對比新舊 VNode，更新
        patch(preSubTree, subTree, container, anchor)
        instance.subTree = subTree
      }
    }

    const effect = new ReactiveEffect(componentUpdateFn)
    const update = effect.run.bind(effect)

    instance.update = update

    effect.scheduler = () => {
      queueJob(update)
    }

    effect.run()
  }

但假如有如下例子，假如點擊 1次按鈕，將打印 4次 effect execute 和 1次 render call：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="app"></div>
    <button id="btn">+++</button>
    <script type="module">
      import { createApp, h, ref, effect, computed } from 'vue'

      const rootComp = {
        setup() {
          const count = ref(0)

          btn.onclick = () => {
            count.value++
            count.value++
            count.value++
            count.value++
          }

          effect(() => {
            console.log('effect execute', count.value)
          })

          return () => {
            console.log('render call')
            return h('div', `count1: ${count.value}`)
          }
        },
      }

      createApp(rootComp).mount('#app')
    </script>
  </body>
</html>

按理說 render call 也應(yīng)該打印 4次，Why？因為代碼里利用 Effect.scheduler 做了 異步更新，即重寫了scheduler：

const componentUpdateFn = () => {
  //......
  const update = effect.run.bind(effect)

  instance.update = update

  effect.scheduler = () => {
    queueJob(update)
  }
  //......
}

function queueJob(job) {
  Promise.resolve().then(() => {
    job()
  })
}

此時，每次 ref 更新后，不立即重置 dirty，而是等所有同步任務(wù)執(zhí)行完后，再執(zhí)行渲染，BINGO

到此這篇關(guān)于Vue3 的批量渲染機制的兩種方法的文章就介紹到這了,更多相關(guān)Vue3 批量渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: