Vue中h函數(shù)和render函數(shù)的區(qū)別淺析
更新時間：2025年06月14日 10:11:25 投稿：daisy
這篇文章主要介紹了Vue中h函數(shù)和render函數(shù)的區(qū)別的相關(guān)資料,h函數(shù)是工具,負責(zé)創(chuàng)建節(jié)點, render函數(shù)是過程,負責(zé)組織節(jié)點并生成最終的虛擬DOM,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
h 函數(shù)的作用
h函數(shù)（即createElement函數(shù)）用于創(chuàng)建虛擬 DOM 節(jié)點。- 它接收參數(shù)（如標(biāo)簽名、屬性、子節(jié)點等），并返回一個虛擬 DOM 節(jié)點對象。
- 你可以把
h函數(shù)看作是一個“構(gòu)建工具”，用來描述虛擬 DOM 的結(jié)構(gòu)。
示例：
const vnode = h('div', { class: 'container' }, 'Hello World');
- 這里，
h函數(shù)創(chuàng)建了一個虛擬 DOM 節(jié)點，表示<div class="container">Hello World</div>。
render 函數(shù)的作用
render函數(shù)是 Vue 組件的一個選項，用于定義如何生成虛擬 DOM。- 它調(diào)用
h函數(shù)來構(gòu)建虛擬 DOM 節(jié)點，并返回最終的虛擬 DOM 樹。 - render 函數(shù)是真正執(zhí)行生成虛擬 DOM 的地方，而
h函數(shù)是render函數(shù)用來構(gòu)建節(jié)點的工具。
示例：
export default {
render(h) {
return h('div', { class: 'container' }, 'Hello World');
}
};
- 在這個例子中，
render函數(shù)調(diào)用h函數(shù)生成虛擬 DOM，并返回結(jié)果。
兩者的關(guān)系
- h 函數(shù)：負責(zé)創(chuàng)建單個虛擬 DOM 節(jié)點。
- render 函數(shù)：負責(zé)組織多個
h函數(shù)的調(diào)用，生成完整的虛擬 DOM 樹。
類比：
如果把生成虛擬 DOM 比作蓋房子：
h函數(shù)是磚塊、水泥等建筑材料。render函數(shù)是建筑師，決定如何使用這些材料蓋房子。
總結(jié)
- h 函數(shù)：用于構(gòu)建虛擬 DOM 節(jié)點（單個節(jié)點）。
- render 函數(shù)：調(diào)用
h函數(shù)，生成完整的虛擬 DOM 樹，并返回給 Vue。
換句話說：
- h 函數(shù)是工具，負責(zé)創(chuàng)建節(jié)點。
- render 函數(shù)是過程，負責(zé)組織節(jié)點并生成最終的虛擬 DOM。
render 函數(shù)是生成虛擬 DOM 的“過程”，而 h 函數(shù)是生成虛擬 DOM 的“工具”。
到此這篇關(guān)于Vue中h函數(shù)和render函數(shù)區(qū)別的文章就介紹到這了,更多相關(guān)Vue h函數(shù)和render函數(shù)區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
vue3+vite中報錯信息處理方法Error: Module “path“ has&nb
這篇文章主要介紹了vue3+vite中報錯信息處理方法Error: Module “path“ has been externalized for browser compatibility...,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue+element+Java實現(xiàn)批量刪除功能
這篇文章主要介紹了vue+element+Java實現(xiàn)批量刪除功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
Vue路由跳轉(zhuǎn)傳參或者打開新頁面跳轉(zhuǎn)問題
這篇文章主要介紹了Vue路由跳轉(zhuǎn)傳參或者打開新頁面跳轉(zhuǎn)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Teleport是Vue3內(nèi)置的核心組件,核心作用是將組件的部分模板渲染到 DOM 樹的指定位置,但組件的邏輯關(guān)系(如父子通信、生命周期、響應(yīng)式)完全不受影響,這篇文章主要介紹了Vue3 Teleport在打包后失效的深層原因與解決方案,需要的朋友可以參考下2026-03-03
文章主要講述了在Vue項目中安裝并使用crypto-js進行AES加解密的操作,提及了與RSA加密的不同,并提到因密鑰長度問題可能需要修改源碼,最后強調(diào)內(nèi)容為個人經(jīng)驗,僅供參考2026-05-05
這篇文章主要介紹了Mock.js在Vue項目中的使用,在vue.config.js中配置devServer，在before屬性中引入接口路由函數(shù)，詳細步驟跟隨小編通過本文學(xué)習(xí)吧2022-07-07
vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用
當(dāng)子組件使用setup后,父組件就不能像vue2那樣直接就可以訪問子組件內(nèi)的屬性和方法,這個時候就需要在子組件內(nèi)使用defineExpose宏函數(shù)來指定想要暴露出去的屬性和方法,本文介紹vue3的defineExpose宏函數(shù)是如何暴露方法給父組件使用,需要的朋友可以參考下2024-05-05
這篇文章主要給大家介紹了vue獲取DOM節(jié)點的常用方法,使用ref屬性,使用$el屬性,使用querySelector和querySelectorAll,使用$refs和querySelector,這幾種方法,需要的朋友可以參考下2023-10-10
Reflect可以操作對象使用， proxy可以代理對象，但沒有找到為啥有時一定要在Proxy代理方法中使用Reflect，這篇文章主要介紹了vue3中的Proxy一定要用Reflect的原因解析,需要的朋友可以參考下2023-04-04