Vue.js設計與實現之十一-渲染器的設計
1、寫在前面
在Vue.js框架很多功能依賴渲染器實現，也是框架性能的核心，能夠直接影響框架性能。對此，Vue.js3的渲染器通過快捷路徑更新的方式，利用編譯器提供的信息提升性能。
2、渲染器和響應系統的結合
渲染器是用來執行渲染任務的，可以在瀏覽器平臺來渲染真實DOM元素，它還能實現框架跨平臺能力。
前面已經實現了reactivity的源碼，為了后續方便講解后續的操作，對此可以直接使用vue.js3的源碼導入使用。
<script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global.js" />
這樣就可以通過暴露的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節點渲染為真實DOM節點的過程叫做掛載，在Vue中mounted鉤子函數會在掛載完成時觸發，從而實現虛擬DOM的掛載。此外，渲染器還需要一個掛載點作為參數，用于指定具體的掛載位置，渲染器會將此DOM元素作為容器元素，可以實現內容的渲染。
在Vue.js3中是通過createRenderer函數來創建渲染器renderer，而renderer不僅包含渲染器函數render，還包括服務端渲染使用的hydrate函數。用于創建應用的createApp函數也是渲染器的一部分。
const renderer = createRenderer();
//首次渲染
renderer.render(oldVNode, document.querySelector("#app"));
//第二次渲染
renderer.render(newVNode, document.querySelector("#app"));
在上面代碼中，首先調用createRenderer函數創建一個渲染器，通過調用渲染器的renderer.render函數創建新的DOM元素，而后將虛擬DOM節點vnode渲染到掛載點上，這就是掛載。
在同一個掛載DOM上，調用renderer.render函數進行渲染時，渲染器除了實現常規的DOM掛載外，還需要執行頁面更新操作，也就是DOM更新。在渲染器會使用vnode與上次渲染的oldVNode進行比較，從而找到并更新變更點，此過程叫做"打補丁"(patch)即更新。
function createRenderer(){
function render(domString, container){
if(vnode){
// 新vnode存在，將其與舊vnode傳遞給patch函數，進行打補丁
patch(container._vnode, vnode, container);
}else{
if(container._vnode){
// 如果舊節點vnode存在，則需要清空掛載點的DOM元素
container.innerHTML = "";
}
}
// 將vnode存儲到container._vnode中
container._vnode = vnode
}
return {
render
}
}
在上面代碼中，是render函數的基本實現。patch函數是整個渲染器的核心入口，承載了最重要的渲染邏輯。
patch(n1, n2, container){
/***/
}
- n1：舊VNode。
- n2：新VNode。
- container：掛載容器。
3、自定義渲染器
我們看看如何自定義實現渲染器，實現跨平臺能力，那就從普通的h1標簽開始。
const vnode = {
type:"h1",
children:"pingping"
}
在上面代碼中實現了一個簡單的vnode，使用type屬性描述vnode類型，type屬性是字符串類型值時是普通標簽。
const vnode = {
type:"h1",
children:"pingping"
}
const renderer = createRenderer();
//首次渲染
renderer.render(vnode, document.querySelector("#app"));
這樣，我們就可以渲染為<h1>pingping</h1>，為了完成渲染工作，下面可以補充patch函數。
function createRenderer(){
function patch(n1, n2, container){
//如果n1不存在的時候，意味著掛載，需要調用mountElement函數完成掛載
if(!n1){
mountElement(n2, container);
}else{
//n1存在，即打補丁更新DOM節點
}
}
function render(domString, container){
if(vnode){
// 新vnode存在，將其與舊vnode傳遞給patch函數，進行打補丁
patch(container._vnode, vnode, container);
}else{
if(container._vnode){
// 如果舊節點vnode存在，則需要清空掛載點的DOM元素
container.innerHTML = "";
}
}
// 將vnode存儲到container._vnode中
container._vnode = vnode
}
return {
render
}
}
在上面代碼中，patch函數中參數n1不存在時，意味著沒有舊VNode，此時只需要進行掛載即可。
function mountElement(vnode, container){
const el = document.createElement(vnode.type);
if(typeof vnode.children === "string"){
el.textContent = vnode.children;
}
container.appendChild(el);
}
在上面代碼中，簡單實現了一個普通標簽元素的掛載工作。Vue.js3是個跨平臺框架，得益于一個不依賴平臺的通用渲染器，而在mountElement函數中依賴了大量瀏覽器API。想要設計通用渲染器，就必須剝離與平臺相關的API，當然可以將這些操作DOM的API作為createRenderer的配置項。
const renderer = createRenderer({
//創建元素
createElement(tag){
return document.createElement(tag);
},
//設置元素的文本節點
setElementText(el, text){
el.textContent = text;
},
//用于給指定父節點添加指定元素
insert(el, parent, achor = null){
parent.insertBefore(el, anchor);
}
})
上面代碼中，可以將操作DOM的API封裝為一個對象，并把它傳遞到createRenderer函數，可以通過配置項來取得操作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
}
}
現在我們對自定義渲染器有個更深刻的認識，自定義渲染器不是什么黑盒子，只是通過代碼抽象，讓核心代碼不再強依賴于平臺特定API，通過自定義配置項實現跨平臺。
4、寫在最后
在本文中，我們了解到渲染器的作用和實現，知道其是將虛擬DOM轉為真實DOM掛載到節點上，在進行節點更新的時候是通過patch實現的。為了實現跨平臺渲染，那么就需要用戶通過自定義配置項渲染器，從而實現DOM的渲染掛載。
