1、寫(xiě)在前面

在Vue.js框架很多功能依賴渲染器實(shí)現(xiàn)，也是框架性能的核心，能夠直接影響框架性能。對(duì)此，Vue.js3的渲染器通過(guò)快捷路徑更新的方式，利用編譯器提供的信息提升性能。

2、渲染器和響應(yīng)系統(tǒng)的結(jié)合

渲染器是用來(lái)執(zhí)行渲染任務(wù)的，可以在瀏覽器平臺(tái)來(lái)渲染真實(shí)DOM元素，它還能實(shí)現(xiàn)框架跨平臺(tái)能力。

前面已經(jīng)實(shí)現(xiàn)了reactivity的源碼，為了后續(xù)方便講解后續(xù)的操作，對(duì)此可以直接使用vue.js3的源碼導(dǎo)入使用。

<script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global.js" />

這樣就可以通過(guò)暴露的API使用：

const {effect, ref} = VueReactivity;
function renderer(domString, container){
  container.innerHTML = domString;
}
const count = ref(1);

effect(()=>{
  renderer(`<h1>${count.value}</h1>`,document.getElementById("app"))
});
count.value++

渲染器把虛擬DOM節(jié)點(diǎn)渲染為真實(shí)DOM節(jié)點(diǎn)的過(guò)程叫做掛載，在Vue中mounted鉤子函數(shù)會(huì)在掛載完成時(shí)觸發(fā)，從而實(shí)現(xiàn)虛擬DOM的掛載。此外，渲染器還需要一個(gè)掛載點(diǎn)作為參數(shù)，用于指定具體的掛載位置，渲染器會(huì)將此DOM元素作為容器元素，可以實(shí)現(xiàn)內(nèi)容的渲染。

在Vue.js3中是通過(guò)createRenderer函數(shù)來(lái)創(chuàng)建渲染器renderer，而renderer不僅包含渲染器函數(shù)render，還包括服務(wù)端渲染使用的hydrate函數(shù)。用于創(chuàng)建應(yīng)用的createApp函數(shù)也是渲染器的一部分。

const renderer = createRenderer();
//首次渲染
renderer.render(oldVNode, document.querySelector("#app"));
//第二次渲染
renderer.render(newVNode, document.querySelector("#app"));

在上面代碼中，首先調(diào)用createRenderer函數(shù)創(chuàng)建一個(gè)渲染器，通過(guò)調(diào)用渲染器的renderer.render函數(shù)創(chuàng)建新的DOM元素，而后將虛擬DOM節(jié)點(diǎn)vnode渲染到掛載點(diǎn)上，這就是掛載。

在同一個(gè)掛載DOM上，調(diào)用renderer.render函數(shù)進(jìn)行渲染時(shí)，渲染器除了實(shí)現(xiàn)常規(guī)的DOM掛載外，還需要執(zhí)行頁(yè)面更新操作，也就是DOM更新。在渲染器會(huì)使用vnode與上次渲染的oldVNode進(jìn)行比較，從而找到并更新變更點(diǎn)，此過(guò)程叫做"打補(bǔ)丁"(patch)即更新。

function createRenderer(){
  function render(domString, container){
    if(vnode){
      // 新vnode存在，將其與舊vnode傳遞給patch函數(shù)，進(jìn)行打補(bǔ)丁
      patch(container._vnode, vnode, container);
    }else{
      if(container._vnode){
        // 如果舊節(jié)點(diǎn)vnode存在，則需要清空掛載點(diǎn)的DOM元素
        container.innerHTML = "";
      }
    }
    // 將vnode存儲(chǔ)到container._vnode中
    container._vnode = vnode
  }
  return {
    render
  }
}

在上面代碼中，是render函數(shù)的基本實(shí)現(xiàn)。patch函數(shù)是整個(gè)渲染器的核心入口，承載了最重要的渲染邏輯。

patch(n1, n2, container){
  /***/
}

• n1：舊VNode。
• n2：新VNode。
• container：掛載容器。

3、自定義渲染器

我們看看如何自定義實(shí)現(xiàn)渲染器，實(shí)現(xiàn)跨平臺(tái)能力，那就從普通的h1標(biāo)簽開(kāi)始。

const vnode = {
  type:"h1",
  children:"pingping"
}

在上面代碼中實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的vnode，使用type屬性描述vnode類(lèi)型，type屬性是字符串類(lèi)型值時(shí)是普通標(biāo)簽。

const vnode = {
  type:"h1",
  children:"pingping"
}
const renderer = createRenderer();
//首次渲染
renderer.render(vnode, document.querySelector("#app"));

這樣，我們就可以渲染為<h1>pingping</h1>，為了完成渲染工作，下面可以補(bǔ)充patch函數(shù)。

function createRenderer(){
  function patch(n1, n2, container){
    //如果n1不存在的時(shí)候，意味著掛載，需要調(diào)用mountElement函數(shù)完成掛載
    if(!n1){
      mountElement(n2, container);
    }else{
      //n1存在，即打補(bǔ)丁更新DOM節(jié)點(diǎn)
    }
  }
  function render(domString, container){
    if(vnode){
      // 新vnode存在，將其與舊vnode傳遞給patch函數(shù)，進(jìn)行打補(bǔ)丁
      patch(container._vnode, vnode, container);
    }else{
      if(container._vnode){
        // 如果舊節(jié)點(diǎn)vnode存在，則需要清空掛載點(diǎn)的DOM元素
        container.innerHTML = "";
      }
    }
    // 將vnode存儲(chǔ)到container._vnode中
    container._vnode = vnode
  }
  return {
    render
  }
}

在上面代碼中，patch函數(shù)中參數(shù)n1不存在時(shí)，意味著沒(méi)有舊VNode，此時(shí)只需要進(jìn)行掛載即可。

function mountElement(vnode, container){
  const el = document.createElement(vnode.type);
  if(typeof vnode.children === "string"){
    el.textContent = vnode.children;
  }
  container.appendChild(el);
}

在上面代碼中，簡(jiǎn)單實(shí)現(xiàn)了一個(gè)普通標(biāo)簽元素的掛載工作。Vue.js3是個(gè)跨平臺(tái)框架，得益于一個(gè)不依賴平臺(tái)的通用渲染器，而在mountElement函數(shù)中依賴了大量瀏覽器API。想要設(shè)計(jì)通用渲染器，就必須剝離與平臺(tái)相關(guān)的API，當(dāng)然可以將這些操作DOM的API作為createRenderer的配置項(xiàng)。

const renderer = createRenderer({
  //創(chuàng)建元素
  createElement(tag){
    return document.createElement(tag);
  },
  //設(shè)置元素的文本節(jié)點(diǎn)
  setElementText(el, text){
    el.textContent = text;
  },
  //用于給指定父節(jié)點(diǎn)添加指定元素
  insert(el, parent, achor = null){
    parent.insertBefore(el, anchor);
  }
})

上面代碼中，可以將操作DOM的API封裝為一個(gè)對(duì)象，并把它傳遞到createRenderer函數(shù)，可以通過(guò)配置項(xiàng)來(lái)取得操作DOM的api。

function createRenderer(options){
  const {
    createElement,
    setElementText,
    insert
  } = options;  
  function mountElement(vnode, container){
    const el = createElement(vnode.type);
    if(typeof vnode.children === "string"){
      setElementText(el, vnode.children)
    }
    insert(el, container);
  }
  function patch(n1, n2, container){
    //...
  }
  function render(domString, container){
     //...
  }
  return {
     render
  }
}

現(xiàn)在我們對(duì)自定義渲染器有個(gè)更深刻的認(rèn)識(shí)，自定義渲染器不是什么黑盒子，只是通過(guò)代碼抽象，讓核心代碼不再?gòu)?qiáng)依賴于平臺(tái)特定API，通過(guò)自定義配置項(xiàng)實(shí)現(xiàn)跨平臺(tái)。

4、寫(xiě)在最后

在本文中，我們了解到渲染器的作用和實(shí)現(xiàn)，知道其是將虛擬DOM轉(zhuǎn)為真實(shí)DOM掛載到節(jié)點(diǎn)上，在進(jìn)行節(jié)點(diǎn)更新的時(shí)候是通過(guò)patch實(shí)現(xiàn)的。為了實(shí)現(xiàn)跨平臺(tái)渲染，那么就需要用戶通過(guò)自定義配置項(xiàng)渲染器，從而實(shí)現(xiàn)DOM的渲染掛載。