Vue渲染器設計實現流程詳細講解

更新時間：2023年01月03日 16:23:17 作者：知奕奕

在瀏覽器平臺上，用它來渲染其中的真實DOM元素。渲染器不僅能夠渲染真實的DOM元素，它還是框架跨平臺能力的關鍵。所以在設計渲染器的時候一定要考慮好自定義的能力

渲染器+響應系統

最簡渲染函數

使用以下函數渲染靜態(tài)字符串或者動態(tài)拼接內容

// 渲染函數
function renderer(domString, container) {
  container.innerHTML = domString;
}
// 渲染dom
renderer("<p>123</p>", document.getElementById("main"));

vuereactivity

@vue/reactivity 包包含了副作用函數 effect 以及響應式 ref

渲染器基本原理

渲染器 renderer，渲染 render

虛擬節(jié)點（vnode） === 虛擬 DOM（vdom）

渲染器把虛擬 DOM 節(jié)點渲染為真實 DOM 節(jié)點的過程叫作掛載（mount）

第一次渲染稱為掛載

后續(xù)渲染稱為打補?。╬atch），也即更新 dom

DIY 渲染器

createRenderer 函數

這是一個構建渲染器的函數，特別留意其中的打補丁 patch 函數的編寫！

patch 的三個參數分別指：舊 vnode，新 vnode，掛載位置

function createRenderer() {
  // dom更新函數
  function patch(n1, n2, container) {}
  // 渲染函數
  function render(vnode, container) {
    // 如果虛擬DOM存在，則執(zhí)行更新程序
    // 如果不存在，就掛載它
    if (vnode) {
      patch(container._vnode, vnode, container);
    } else {
      if (container._vnode) {
        container.innerHTML = "";
      }
    }
    container._vnode = vnode;
  }
}

構建一個 vnode 然后渲染它

const vnode = {
  type: "h1",
  children: "helloworld",
};
const renderer = createRenderer();
renderer.render(vnode, document.querySelector("#main"));

兼容所有瀏覽器渲染需求

可以將配置項交予渲染者進行定義，而不寫死，這樣就可以適配多瀏覽器了！

首先在渲染器函數內定義三大配置項：

function createRenderer() {
  // 定義三大配置項
  const { createElement, insert, setElementText } = options;
  function mountElement(){...}
}

定義 mountElement

// 掛載元素函數
function mountElement(vnode, container) {
  // 判斷元素類型
  const ele = createElement(vnode.type);
  // 如果類型為string，那么設置文本
  if (typeof vnode.children === "string") {
    setElementText(ele, vnode.children);
  }
  // 將新元素插入到指定掛載點
  insert(ele, container);
}

到此這篇關于Vue渲染器設計實現流程詳細講解的文章就介紹到這了,更多相關Vue渲染器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: