Vue3渲染器與編譯器深入淺析

更新時(shí)間：2023年02月01日 15:02:39 作者：FE雜志社

這篇文章主要為大家介紹了Vue3渲染器與編譯器深入淺析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

渲染器

相關(guān)概念

渲染器是Vue框架性能的核心，Vue3的渲染器不僅包含傳統(tǒng)的Diff算法，還獨(dú)創(chuàng)了快捷的路徑更新方式，可以充分利用渲染器提供的信息，大大提升更新和渲染的性能；

Vue中的h函數(shù)返回的就是一個(gè)對(duì)象，其作用是讓編寫的虛擬DOM變得更加輕松，換句話說h函數(shù)就是一個(gè)輔助創(chuàng)建虛擬DOM的工具函數(shù)而已；
虛擬DOM就是用來描述真實(shí)DOM的普通JS對(duì)象，渲染器會(huì)將該對(duì)象渲染成真實(shí)DOM元素,當(dāng)然虛擬DOM也可以描述組件信息，而組件又可以理解成為一組DOM元素的封裝
組件的渲染函數(shù)：一個(gè)組件要渲染的內(nèi)容是通過渲染函數(shù)來描述的，也就是Vue中的render函數(shù)，Vue會(huì)根據(jù)組件的render函數(shù)的返回值拿到虛擬DOM，然后將組件的內(nèi)容渲染出來；
渲染器在渲染組件時(shí)，需要先通過執(zhí)行組件的渲染函數(shù)拿到返回值即組件要渲染的內(nèi)容，可以稱為為subTree，最后再遞歸調(diào)用渲染器將subTree渲染出來即可

組件可以通過函數(shù)或JS對(duì)象來實(shí)現(xiàn)

通過函數(shù)實(shí)現(xiàn)時(shí)：該函數(shù)返回一個(gè)描述DOM節(jié)點(diǎn)的虛擬DOM即可，此時(shí)渲染器的Tag屬性值就是該組件函數(shù)了，對(duì)應(yīng)渲染器中也需要進(jìn)行判斷Tag為函數(shù)時(shí)進(jìn)行特殊處理即可(即通過執(zhí)行該函數(shù)拿到對(duì)應(yīng)描述普通節(jié)點(diǎn)的虛擬DOM然后執(zhí)行渲染器renderer即可)
通過JS對(duì)象實(shí)現(xiàn)時(shí)：其renderer返回值就是一個(gè)描述節(jié)點(diǎn)的虛擬DOM，因此可以直接執(zhí)renderer函數(shù)即可得到虛擬DOM

// MyComponent 是一個(gè)對(duì)象
const MyComponent = {
  render() {
    return {
      tag: "div",
      props: {
        onClick: () => alert("hello"),
      },
      children: "click me",
    };
  },
};
function mountComponent(vnode, container) {
  // 調(diào)用組件函數(shù)，獲取組件要渲染的內(nèi)容（虛擬 DOM）
  const subtree = vnode.tag();
  // 遞歸地調(diào)用 renderer 渲染 subtree
  renderer(subtree, container);
}

// MyComponent 是一個(gè)函數(shù)
function renderer(vnode, container) {
  if (typeof vnode.tag === "string") {
    // 說明 vnode 描述的是標(biāo)簽元素
    // mountElement內(nèi)部實(shí)現(xiàn)與下文的「實(shí)現(xiàn)renderer渲染器邏輯一致」
    mountElement(vnode, container);
  } else if (typeof vnode.tag === "function") {
    // 說明 vnode 描述的是組件
    mountComponent(vnode, container);
  }
}
function mountComponent(vnode, container) {
  // 調(diào)用組件函數(shù)，獲取組件要渲染的內(nèi)容（虛擬 DOM）
  const subtree = vnode.tag();
  // 遞歸地調(diào)用 renderer 渲染 subtree
  renderer(subtree, container);
}

render與renderer

renderer代表渲染器，其作用是將虛擬DOM渲染為特定平臺(tái)上的真實(shí)DOM，如在瀏覽器平臺(tái)上，渲染器會(huì)將虛擬DOM渲染為真實(shí)DOM
render表示渲染，是執(zhí)行的動(dòng)作
渲染器不僅用來渲染，還可以用來執(zhí)行其他操作，如激活已有DOM、SSR等；是更寬泛的概念，renderer包含render；
渲染器除了普通的創(chuàng)建節(jié)點(diǎn)功能外，還需要實(shí)現(xiàn)精確的定點(diǎn)更新對(duì)應(yīng)變化的虛擬DOM到界面上，其內(nèi)部原理簡(jiǎn)單，歸根結(jié)底就是通過熟悉的DOM操作API來完成渲染工作

實(shí)現(xiàn)renderer渲染器

function renderer(vnode, container) {
  // 使用 vnode.tag 作為標(biāo)簽名稱創(chuàng)建對(duì)應(yīng)的 DOM 元素
  const el = document.createElement(vnode.tag);
  // 遍歷 vnode.props，將屬性、事件添加到 DOM 元素
  for (const key in vnode.props) {
    if (/^on/.test(key)) {
      // 如果 key 以 on 開頭，說明它是事件
      el.addEventListener(
        key.substr(2).toLowerCase(), // 事件名稱 onClick ---> click
        vnode.props[key] // 事件處理函數(shù)
      );
    }
  }
  // 處理 children
  if (typeof vnode.children === "string") {
    // 如果 children 是字符串，說明它是元素的文本子節(jié)點(diǎn)
    el.appendChild(document.createTextNode(vnode.children));
  } else if (Array.isArray(vnode.children)) {
    // 遞歸地調(diào)用 renderer 函數(shù)渲染子節(jié)點(diǎn)，使用當(dāng)前元素 el 作為掛載點(diǎn)
    vnode.children.forEach((child) => renderer(child, el));
  }
  // 將元素添加到掛載點(diǎn)下
  container.appendChild(el);
}

創(chuàng)建元素：對(duì)應(yīng)虛擬DOM中的Tag屬性
為創(chuàng)建的元素添加屬性和事件：對(duì)應(yīng)虛擬DOM中的Props屬性
添加子元素：對(duì)應(yīng)虛擬DOM中的children屬性
- 這里的children可以是數(shù)組或字符串，數(shù)組時(shí)需要以剛才新建的DOM節(jié)點(diǎn)為父節(jié)點(diǎn)進(jìn)行回調(diào)渲染器renderer進(jìn)行遞歸渲染，當(dāng)是普通字符串時(shí)表明子節(jié)點(diǎn)是一個(gè)普通文本，直接調(diào)用createTextNode API進(jìn)行創(chuàng)建后添加到新創(chuàng)建的元素內(nèi)部即可

具體代碼實(shí)現(xiàn)邏輯

角色解析

控制著Vue生命周期里試圖的掛載、更新和渲染

具體作用

創(chuàng)建VNode(h函數(shù))
掛載(mount)/渲染(render)/更新(patch)
渲染的核心diff算法

Vue3特殊內(nèi)置組件解析

<template>
   // Portal 把里面的內(nèi)容掛載到 #app
  <Portal target="#app">
    <div class="overlay"></div>
  </Portal>
</template>

Fragment
- 只將該VNode的子節(jié)點(diǎn)渲染到頁面上
- 相當(dāng)于Vue2中的template標(biāo)簽
Portal
- 允許將其中的內(nèi)容渲染到任何地方

渲染器階段分析

mount掛載階段

mount就是將VNode掛載到真實(shí)DOM上

patch階段

patch就是使用新的VNode和舊的VNode進(jìn)行對(duì)比，用最少的資源實(shí)現(xiàn)DOM更新，也叫「打補(bǔ)丁」

簡(jiǎn)單實(shí)現(xiàn)

渲染器接受兩個(gè)參數(shù)，要被渲染的VNode和掛載點(diǎn)(承載內(nèi)容的container)

function createRenderer() {
  function render(vnode, container) {
    if (vnode) {
      // 存在舊節(jié)點(diǎn)  需要進(jìn)行patch補(bǔ)丁更新
      patch(container._vnode, vnode, container);
    } else {
      if (container._vnode) {
        // 舊 vnode 存在，且新 vnode 不存在，此時(shí)渲染的是上一步中的節(jié)點(diǎn)值，說明是卸載（unmount）操作
        container.innerHTML = "";
      }
    }
    // 把 vnode 存儲(chǔ)到 container._vnode 下，即后續(xù)渲染中的舊 vnode
    container._vnode = vnode;
  }
  return {
    render,
  };
}