在 Vue 過氣前要學的第八件事 - 一次了解渲染機制

17th鐵人賽 vue.js javascript 程式設計鐵人賽

Yanya

2025-09-08 09:47:10

150 瀏覽

分享至

前言

為什麼我們要了解 Vue 的渲染機制呢，
~~當然是為了面試~~ 當然是為了自我成長阿。

我主觀感受來說，在於 使用框架 這件事上，你不太應該要先了解渲染機制才能用框架，
這樣過於拉高使用門檻了，

但由於渲染機制、整個響應式系統，
以及明天的 Vapor Mode 有很大的關聯性，
因此還是在這邊去講述一下目前 Vue 是依賴什麼去機制去做內部渲染的。

概述

Vue 到目前為止的渲染機制是基於 Virtual DOM 的概念構建的，
沒錯 Vue 也有 Vitrual DOM, 從 React 借 ~~(ㄆㄧㄠˊ)~~ 鑑 ~~(ㄑ一ㄝˋ)~~ 來的。

簡單來說就是先把所需要的 UI ，
透過程式生成 Vitrual DOM (本文接下來以將 vDOM 表示)，
然後讓真實 DOM 與 vDOM 保持同步。

以下方為例 vDOM 可能會長這樣 :

const vnode = {
  type:'div',
  props:{
    id:'ithome'
  },
  children:[
    {type: 'p', children: 'ithelp' }
  ]
}
////////////// 同等於 //////////////////
<div id="ithome">
  <p>ithelp</p>
</div>

這邊的 vnode 代表一個虛擬節點，裡面可能有更多的子節點，
接著渲染器就會遍歷整棵 vDOM tree，

下一步同步真實 DOM tree，這個過程就是 mount ( 掛載 )，
而當你在目前的基礎上更新了某個部分，例如說文字

那就會生成另一棵 vDOM tree，並和現在這份進行比較，
找出區別後把變化應用到真實 DOM 上，這個過程叫 patch( 更新 ) 或是 diffing, reconciliation

Render Pipeline

渲染函數和模板

還記得我們上面的 vNode 嗎，那個看不是很懂的物件，
Vue 其實有提供一個 h() 讓你手動建立 vNode，

h() 是 hyperscript 的簡稱，指能生成 HTML 的 JavaScript，
又或著你可以叫他 createVNode()。

基礎使用

<script>
import { h } from 'vue';
export default {
  setup() {
    return () => h('div', "It's Yanya.")
  }
}
</script>

這邊可以簡單講解一下 h() 的幾個參數 :

type: HTML element 類型 ex: 'div', 'span'
props: 參數或元件本身的 props
children : 子節點

完整的基礎寫法可以參照 基本用法 這邊不多做贅述。

那相信各位也看的出來，如果是很簡單的結構，使用渲染函數是沒關係
但還是原本的模板寫法更接近 HTML 結構。

對於一般使用者來說，模板語法應該能滿足大部分的場景，且 Vue 本身對於模板語法有靜態分析，
可以用來優化效能，例如更新類型標記。

更新類型標記

<input id="name" :class="class">

這是一個綁著動態 class 的 input
為了要省去渲染器因為過多尋找變更，所造成的效能消耗，
Vue 選擇在編譯階段透過更新標記來優化。

render() {
    return {
        tag:'input'
        props:{
        id: 'name',
        class: class
      },
      patchFlags: 1 // 假設是 1 代表 class 是動態的變數
    }
}

這裡的 patchFlags 就是為了讓 rednerer 看到就知道只有這個 class 會變更，
讓編譯時能優化 vDOM 的效能，詳細可以看這裡 : 帶編譯時信息的虛擬 DOM