快捷導(dǎo)航

Vue3渲染器與渲染函數(shù)的用法詳解

更新時(shí)間：2025年08月14日 09:23:39 作者：編程隨想_Code

Vue3渲染器將虛擬DOM轉(zhuǎn)為真實(shí)DOM,支持高效更新與跨平臺(tái)；渲染函數(shù)（h()）替代JSX,更靈活,與CompositionAPI結(jié)合可優(yōu)化性能,提升復(fù)雜場(chǎng)景下的開發(fā)效率與應(yīng)用性能

一、渲染器：虛擬DOM的操作核心

渲染器是 Vue 內(nèi)部的核心模塊，負(fù)責(zé)將虛擬 DOM (VNode) 轉(zhuǎn)換為真實(shí) DOM。

Vue3 的渲染器具有以下特點(diǎn)：

渲染器關(guān)鍵功能：

將 VNode 掛載為真實(shí) DOM
對(duì)比新舊 VNode 執(zhí)行高效更新
處理組件生命周期鉤子
實(shí)現(xiàn)跨平臺(tái)渲染能力

二、渲染函數(shù)：JSX 的替代方案

Vue3 提供了 h() 函數(shù)（hyperscript）作為創(chuàng)建 VNode 的主要方式：

import { h } from 'vue'

export default {
  render() {
    return h(
      'div', 
      { class: 'container', id: 'app' },
      [
        h('h1', { style: { color: 'blue' } }, '標(biāo)題'),
        this.showSubtitle ? 
          h('p', null, '動(dòng)態(tài)子標(biāo)題') : 
          h('div', { class: 'placeholder' }),
        h('ul', null, 
          this.items.map(item => 
            h('li', { key: item.id }, item.text)
          )
        )
      ]
    )
  }
}

三、渲染函數(shù) vs JSX

特性	渲染函數(shù)	JSX
語(yǔ)法	純 JavaScript 函數(shù)調(diào)用	XML-like 語(yǔ)法擴(kuò)展
類型支持	需要額外類型定義	完美支持 TypeScript
動(dòng)態(tài)內(nèi)容	需要手動(dòng)條件判斷	支持內(nèi)聯(lián)表達(dá)式
組件引用	直接使用組件變量	需要導(dǎo)入組件
學(xué)習(xí)曲線	較低（純JS）	較高（新語(yǔ)法）

四、自定義渲染器實(shí)戰(zhàn)

Vue3 允許創(chuàng)建自定義渲染器，實(shí)現(xiàn)非 DOM 環(huán)境渲染：

import { createRenderer } from 'vue'

const { createApp } = createRenderer({
  createElement(type) {
    console.log(`創(chuàng)建元素: ${type}`)
    return { type }
  },
  
  insert(el, parent) {
    console.log(`插入 ${el.type} 到 ${parent.type}`)
  },
  
  patchProp(el, key, prevValue, nextValue) {
    console.log(`更新屬性: ${key} = ${nextValue}`)
  }
})

const app = createApp({
  render() {
    return h('div', { id: 'app' }, [
      h('span', { class: 'text' }, '自定義渲染')
    ])
  }
})

app.mount({ type: 'root' })

五、性能優(yōu)化技巧

避免不必要的重新渲染

import { shallowRef } from 'vue'

const heavyList = shallowRef([...]) // 淺層響應(yīng)

合理使用 key 屬性

h('div', { key: item.id }, item.content)

利用 Fragment 減少包裝元素

return h(Fragment, null, [
  h('header', ...),
  h('main', ...),
  h('footer', ...)
])

緩存靜態(tài)內(nèi)容

const staticContent = h('div', { class: 'static' }, '不變的內(nèi)容')

render() {
  return h('div', [
    staticContent,
    // ...動(dòng)態(tài)內(nèi)容
  ])
}

六、高級(jí)應(yīng)用場(chǎng)景

動(dòng)態(tài)組件工廠：

function createDynamicComponent(type, props) {
  return h(type, {
    ...props,
    onCustomEvent: handleEvent
  })
}

渲染函數(shù)與 Composition API 結(jié)合：

import { ref, h } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    return () => h('div', [
      h('button', {
        onClick: () => count.value++
      }, '增加'),
      h('span', `當(dāng)前計(jì)數(shù): ${count.value}`)
    ])
  }
}