vue中render函數(shù)和h函數(shù)以及jsx的使用方式
更新時間：2022年08月16日 09:44:29 作者：丑小鴨變黑天鵝
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一、認識h函數(shù)
Vue推薦在絕大數(shù)情況下使用模板來創(chuàng)建你的HTML，然后一些特殊的場景，你真的需要JavaScript的完全編程的能力，這個時候你可以使用 渲染函數(shù) ，它比模板更接近編譯器
- Vue在生成真實的DOM之前，會將我們的節(jié)點轉(zhuǎn)換成VNode，而VNode組合在一起形成一顆樹結(jié)構(gòu)，就是虛 擬DOM（VDOM）
- 事實上，我們之前編寫的 template 中的HTML 最終也是使用渲染函數(shù)生成對應(yīng)的VNode
- 那么，如果你想充分的利用JavaScript的編程能力，我們可以自己來編寫 createVNode 函數(shù)，生成對應(yīng)的VNode
- 那么我們應(yīng)該怎么來做呢？使用 h()函數(shù)
- h() 函數(shù)是一個用于創(chuàng)建 vnode的一個函數(shù)
- 其實更準確的命名是 createVNode() 函數(shù)，但是為了簡便在Vue中將之簡化為 h() 函數(shù)
二、h()函數(shù) 如何使用呢？
它接受三個參數(shù)：
注意事項：
如果沒有props，那么通常可以將children作為第二個參數(shù)傳入
如果會產(chǎn)生歧義，可以將null作為第二個參數(shù)傳入，將children作為第三個參數(shù)傳入
三、h函數(shù)的基本使用
h函數(shù)可以在兩個地方使用render函數(shù)選項中setup函數(shù)選項中（setup本身需要是一個函數(shù)類型，函數(shù)再返回h函數(shù)創(chuàng)建的VNode）
四、h函數(shù)計數(shù)器案例
五、setup函數(shù)計數(shù)器案例
六、函數(shù)組件和插槽的使用
七、jsx組件的使用
具體的語法可以看我的react文章，這里給一個在vue中使用jsx的簡單案例
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
process.env?是?Node.js?中的一個環(huán)境對象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下2023-03-03
vue3編譯報錯ESLint:defineProps is not defined&nbs
這篇文章主要介紹了vue3編譯報錯ESLint:defineProps is not defined no-undef的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue模板語法v-bind教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
Vue通過provide inject實現(xiàn)組件通信
這篇文章主要介紹了Vue通過provide inject實現(xiàn)組件通信,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參代碼示例
最近外部公司的app要接入我司的uni H5項目,所以這篇文章主要給大家介紹了關(guān)于uniapp?APP中內(nèi)嵌webview的H5與APP相互通訊動態(tài)傳參的相關(guān)資料,需要的朋友可以參考下2024-04-04
Vue3.5?發(fā)布已近半年,這篇文章主要來和大家技術(shù)一下它常用的新增和改動特性,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
防抖和節(jié)流的目的都是為了減少不必要的計算，下面這篇文章主要給大家介紹了關(guān)于vue使用節(jié)流函數(shù)踩坑的相關(guān)資料,需要的朋友可以參考下2021-05-05
這篇文章主要介紹了使用el-form-item設(shè)置標簽長度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue2+marked.js實現(xiàn)AI流式輸出的項目實踐
本文主要介紹了Vue2+marked.js實現(xiàn)AI流式輸出的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
vue實現(xiàn)拖動調(diào)整左右兩側(cè)容器大小
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖動調(diào)整左右兩側(cè)容器大小，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03