1.寫在前面

2.聲明式描述UI

通過前面的介紹，我們知道Vue.js3是聲明式UI框架，作者是如何參與設(shè)計一個聲明式的UI框架，編寫前端頁面又涉及到哪些內(nèi)容?

• DOM元素
• 屬性
• 事件
• 元素的層級結(jié)構(gòu)

上面這些內(nèi)容是原生包含的，進行框架設(shè)計時如何讓它們變成響應(yīng)式的，在Vue.js3中的解決方案是：

• 與原生html標簽一樣的描述DOM元素和屬性、層級結(jié)構(gòu)等
  onechuan
• 使用:或v-bind來描述動態(tài)綁定的屬性，使用@或v-on描述事件
  onechuan

這樣，使用者不需要手寫任何命令式代碼，就可以實現(xiàn)聲明式描述UI。當然除了使用模板形式描述UI外，還能使用JS對象來描述：

const element = {
  //標簽元素
  tag: "div",
  //標簽屬性
  props:{
    onClick: handleClick
  },
  //子節(jié)點
  children: [
    { tag:"span" }
  ]
}

對應(yīng)的template模板是：

使用js數(shù)據(jù)對象描述和template模板有什么異同呢?

//h標簽的限制
const level = 3;
const element = {
  tag: `h${level}`,//h3標簽
}

我們看到對于js對象結(jié)構(gòu)代碼簡潔清晰，而使用模板則需要進行窮舉：

我們在Vue.js組件中通過手寫渲染函數(shù)就是使用虛擬DOM來描述UI，h函數(shù)的返回值就是一個對象，用于開發(fā)者輕松地使用虛擬DOM描述UI。

import {h} from "vue";

export default {
  render(){
    return h("div",{ onClick: handleClick })//虛擬DOM
  }
}

對應(yīng)的JS對象描述UI就是如下代碼段：

export default {
  render(){
    return {
      tag:"div",
      props:{onClick: handleClick }
    }
  }
}

組件的渲染函數(shù)renderer的作用：Vue.js根據(jù)組件的render函數(shù)的返回值生成虛擬DOM，進而將組件內(nèi)容進行渲染到頁面。

3.初識渲染器

我們可以使用JS數(shù)據(jù)對象來描述虛擬DOM，那么虛擬DOM又是如何通過渲染函數(shù)轉(zhuǎn)為真實DOM后，渲染到頁面的呢?

在前面的代碼片段中是使用JS數(shù)據(jù)對象來描述虛擬DOM：

const vnode = {
    tag:"div",
    props:{
        onclick:()=>console.log("hello pingping")
    },
    children:"please click me"
}

我們需要編寫渲染函數(shù)renderer去將虛擬DOM渲染為真實DOM，接收兩個參數(shù)：vnode虛擬DOM對象以及container真實DOM元素掛載點，container用于掛載渲染函數(shù)渲染的真實DOM元素。

function renderer(vnode, container){
    // 使用vnode的tag作為標簽名渲染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.substring(2).toLowerCase(),//事件名稱將onClick-->click
                vnode.props[key]//事件處理函數(shù)
            )
        }
    }

    // 處理children
    if(typeof vnode.children === "string"){
        // 如果是字符串，直接作為元素的文本子節(jié)點
        el.appendChild(document.createTextNode(vnode.children))
    }else if(Array.isArray(vnode.children)){
        // 遞歸調(diào)用renderer函數(shù)進行渲染子節(jié)點，使用當前元素el作為掛載點
        vnode.children.forEach(child=>renderer(child,el))
    }
    // 將元素添加到掛載點
    container.appendChild(el)
}

調(diào)用：

renderer(vnode, document.body)

點擊按鈕后：

渲染器renderer的實現(xiàn)思路：

• 創(chuàng)建元素
• 給元素添加屬性和事件
• 遞歸遍歷children創(chuàng)建節(jié)點

4.組件的本質(zhì)

組件是一組DOM元素的封裝，而這組DOM元素就是組件渲染的內(nèi)容，對此可以定義函數(shù)來描述這段真實DOM元素對應(yīng)的虛擬DOM對象。

const MyComponent = function(){
    return {
        tag:"div",
        props:{
            onClick: ()=>console.log("hello world")
        },
        children:"click me"
    }
}

通過虛擬DOM對象中tag屬性可以用于存儲組件函數(shù)，將其作為標簽類型進行渲染，同樣的也需要渲染器renderer函數(shù)。當然，此時的渲染函數(shù)需要根據(jù)待渲染標簽的類型進行判定，是普通標簽元素還是組件元素。

const vnode = {
    tag: MyComponent
}

renderer(vnode, document.body)

function renderer(vnode, container){
    // 判斷是標簽元素還是組件
    if(typeof vnode.tag === "string"){
        // 如果是字符串，直接作為元素的標簽元素
        mountElement(vnode, container)
    }else{
        mountComponent(vnode, container)
    }
}

// 渲染元素
function mountElement(vnode, container){
    // 使用vnode.tag 作為標簽名稱創(chuà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.substring(2).toLowerCase(),//事件名稱將onClick-->click
                vnode.props[key]//事件處理函數(shù)
            )
        }
    }

    // 處理children
    if(typeof vnode.children === "string"){
        // 如果是字符串，直接作為元素的文本子節(jié)點
        el.appendChild(document.createTextNode(vnode.children))
    }else if(Array.isArray(vnode.children)){
        // 遞歸調(diào)用renderer函數(shù)進行渲染子節(jié)點，使用當前元素el作為掛載點
        vnode.children.forEach(child=>renderer(child,el))
    }
    // 將元素添加到掛載點
    container.appendChild(el)
}

// 渲染組件
function mountComponent(vnode, container){
    // 調(diào)用組件函數(shù)，獲取組件要渲染的內(nèi)容-虛擬DOM
    const subtree = vnode.tag()
    // 遞歸調(diào)用renderer渲染subtree
    renderer(subtree, container)
}
     

5.模板的工作原理

其實，手寫虛擬DOM還是使用模板形式，都可以聲明式描述UI，在Vue.js框架設(shè)計中是始終支持兩種形式的。我們知道JS對象描述虛擬DOM的形式，是通過渲染器renderer將虛擬DOM轉(zhuǎn)為真實DOM的，那么模板又是如何渲染到頁面的呢?

  hello pingping

模板字符串渲染到頁面，依賴于

模板字符串渲染到頁面，依賴于Vue.js框架的一個重要函數(shù)--編譯器compiler，其作用就是將模板字符串編譯成與之功能對應(yīng)的渲染函數(shù)：

render(){
  return h("div",{onClick: handleClick},"hello pingping")
}

對此，我們知道無論是使用模板字符串還是直接手寫渲染函數(shù)，都是通過渲染函數(shù)將虛擬DOM轉(zhuǎn)為真實DOM，最終將描述的內(nèi)容渲染到頁面上。只不過使用模板字符串多了一個編譯過程，需要通過編譯器將模板字符串編譯成渲染函數(shù)。

6.編譯器和渲染器組成有機整體

在Vue.js框架設(shè)計中，組件實現(xiàn)依賴于渲染器和編譯器，而渲染器和編譯器之間是彼此獨立又相互依賴的重要部分。

7.寫在后面

本文中，我們了解到Vue.js框架是通過聲明式描述UI的，而描述UI又有兩種形式：模板字符串和手寫虛擬DOM的形式，虛擬DOM形式比模板字符串更加靈活，但是模板字符串比虛擬DOM形式更加直觀。

在Vue.js框架設(shè)計中有兩種重要的組成部分：編譯器和渲染器，編譯器就是將模板字符串編譯成渲染函數(shù)，而渲染器則是將虛擬DOM創(chuàng)建為真實DOM，最終完成頁面的渲染。

當前名稱：Vue.js設(shè)計與實現(xiàn)之Vue.js3的設(shè)計思路
本文地址：http://uogjgqi.cn/article/cojoige.html