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