Vue3中h函數(shù)超詳細(xì)教程(附示例與應(yīng)用場景)
更新時間：2025年07月28日 08:25:39 作者：JaysonJin
這篇文章主要給大家介紹了關(guān)于Vue3中h函數(shù)的相關(guān)資料,h函數(shù)是Vue3中用來創(chuàng)建虛擬節(jié)點(VNode)的工具,它的本質(zhì)是createVNode方法的簡寫,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
前言
??適合初中高級 Vue 3 開發(fā)者，了解 Composition API、JSX/TSX 或 render 函數(shù)寫法的同學(xué)
一、什么是h函數(shù)？
在 Vue 3 中，h 是創(chuàng)建虛擬 DOM（VNode）的工具函數(shù)，常用于渲染函數(shù)中，替代 Vue 2 中的 createElement。
h 是 hyperscript 的縮寫，代表用 JS 語法構(gòu)造虛擬 DOM 樹結(jié)構(gòu)。
二、語法結(jié)構(gòu)與基本用法
h( type, // string | Component | object props?, // object | null children? // string | array | object | function )
參數(shù)詳解：
| 參數(shù) | 說明 |
|---|---|
type | 標(biāo)簽名（如 'div'）或組件引用 |
props | 元素屬性或組件 props，例如 class、onClick 等 |
children | 子節(jié)點，可以是字符串、數(shù)組、VNode，或插槽函數(shù)等 |
三、使用場景詳解與示例
1. 普通元素渲染（替代模板語法）
import { h } from 'vue'
export default {
render() {
return h('div', { class: 'hello' }, 'Hello World')
}
}
效果等同于：
<template> <div class="hello">Hello World</div> </template>
2. 嵌套結(jié)構(gòu)組件
export default {
render() {
return h('div', { class: 'wrapper' }, [
h('h2', '標(biāo)題'),
h('p', '段落內(nèi)容'),
h('button', { onClick: this.handleClick }, '點擊')
])
},
methods: {
handleClick() {
alert('點擊了按鈕！')
}
}
}
3. 渲染組件（傳遞 props 和插槽）
import { h } from 'vue'
import MyButton from './MyButton.vue'
export default {
render() {
return h(MyButton, { type: 'primary', onClick: this.doSomething }, {
default: () => '點我'
})
},
methods: {
doSomething() {
console.log('點擊按鈕！')
}
}
}
4. 組合 JSX/TSX 使用（推薦）
如果你啟用了 TSX/JSX，使用 h 更加自然：
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
return () => (
<div class="box">
<p>Hello JSX</p>
</div>
)
}
})
?? 需要配置
vite.config.ts啟用 JSX 插件：
import vueJsx from '@vitejs/plugin-vue-jsx'
export default {
plugins: [vueJsx()]
}
四、常見擴(kuò)展應(yīng)用
動態(tài)渲染表格列（Element Plus 示例）
render() {
return h('el-table-column', {
prop: 'name',
label: '姓名',
scopedSlots: {
default: (scope) => h('span', scope.row.name)
}
})
}
??注意：Vue 3 移除了
scopedSlots，需改為 slot 函數(shù)形式：
render() {
return h(ElTableColumn, { prop: 'name', label: '姓名' }, {
default: ({ row }) => h('span', row.name)
})
}
結(jié)合vnode動態(tài)插槽場景
render() {
return h(MyComponent, {}, {
default: () => '默認(rèn)插槽內(nèi)容',
header: () => h('h1', '頭部插槽')
})
}
五、總結(jié)：何時使用h
| 需求 | 是否使用 h |
|---|---|
| 模板編寫簡單 UI | ? 推薦使用 <template> |
| 組件庫封裝 / 高階組件 | ? 使用 render 函數(shù)或 h |
| 動態(tài)插槽渲染 | ? 推薦用 h |
| 插件 / 指令 / 動態(tài) DOM | ? 推薦用 h |
| 使用 JSX/TSX 時 | ? 使用 h 或 JSX |
附錄：Vue 官方h類型定義（簡化）
function h( type: string | Component, props?: object | null, children?: string | VNode[] | () => VNode ): VNode
你也可以從 Vue 內(nèi)部導(dǎo)出它：
import { h } from 'vue'
到此這篇關(guān)于Vue3中h函數(shù)超詳細(xì)教程的文章就介紹到這了,更多相關(guān)Vue3 h函數(shù)詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點及其與目標(biāo)或理想值的關(guān)系的圖表類型,它在顯示進(jìn)度、完成率或其他類似度量時非常有用,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06
vue和react等項目中更簡單的實現(xiàn)展開收起更多等效果示例
這篇文章主要介紹了vue和react等項目中更簡單的實現(xiàn)展開收起更多等效果示例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決
這篇文章主要介紹了Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
<Teleport> 是 Vue 3 的一個內(nèi)置組件,允許將組件的內(nèi)容渲染到 DOM 中的任意位置,而不改變其邏輯結(jié)構(gòu),這篇文章主要介紹了Vue 3 的＜Teleport＞功能與用法詳解,需要的朋友可以參考下2025-04-04
文章詳細(xì)介紹了前端項目開發(fā)中常見的技術(shù)棧,包括安裝依賴、創(chuàng)建類型定義、狀態(tài)管理、核心封裝（Axios請求）、API接口示例、組件使用以及可選的路由守衛(wèi),作者分享了個人經(jīng)驗,希望為開發(fā)者提供參考和幫助2025-12-12
這篇文章主要介紹了VUE使用axios調(diào)用后臺API接口的方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08
虛擬列表對于大部分一線開發(fā)同學(xué)來說是一點都不陌生的東西了,這篇文章主要來教大家如何在2分鐘內(nèi)實現(xiàn)一個定高的虛擬列表,感興趣的可以了解下2024-12-12
vue2?element-ui?el-checkbox視圖不更新問題及解決
作者在開發(fā)過程中遇到了視圖不更新的問題,最終通過改變一個無關(guān)緊要的響應(yīng)式數(shù)據(jù)來解決,讓視圖發(fā)生改變2024-12-12
文章介紹了Vue.js中的計算屬性（computed properties）,解釋了它們的基本概念、語法、優(yōu)勢以及應(yīng)用場景,文章通過有趣的示例展示了計算屬性在不同場景下的應(yīng)用,如計算全名、計算列表的總和和計算對象的屬性,感興趣的朋友一起看看吧2025-03-03
這篇文章主要介紹了vue3 elementplus table合并寫法,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06