vue中的h函數(shù)使用及說明
vue中的h函數(shù)使用
我們一般在編寫vue代碼時(shí)，會(huì)首先編寫模板代碼，也就是template標(biāo)簽中的代碼。
如果我們想要比模板更加接近編譯器，此時(shí)我們可以使用渲染函數(shù)。
我們編寫的代碼轉(zhuǎn)化為真正的dom時(shí)，首先會(huì)先轉(zhuǎn)換為VNode，然后多個(gè)Vnode進(jìn)行結(jié)合起來轉(zhuǎn)化為VDOM，最后VDOM才渲染成真實(shí)的DOM，此時(shí)我們思考一個(gè)問題，如果我們直接編寫生成vnode的代碼，效率會(huì)更高，這里我們就是h()函數(shù)。
h函數(shù)我們也可以稱為createVnode函數(shù)。
一、參數(shù)設(shè)置
h函數(shù) 接收三個(gè)參數(shù)。
- 第一個(gè)參數(shù)：可以為一個(gè)html標(biāo)簽，一個(gè)組件，一個(gè)異步組件，或者是一個(gè)函數(shù)式組件。
- 第二個(gè)參數(shù)：{ Object } Props，與attributes和props,以及事件對(duì)應(yīng)的對(duì)象，我們可以在模板中使用，如果沒有需要傳入的屬性，可以設(shè)置為null。
- 第三個(gè)參數(shù)：{String | Object |Array}可以是字符串Text文本或者是h函數(shù)構(gòu)建的對(duì)象再者可以是有插槽的對(duì)象。
二、基本使用
在options api中使用h函數(shù)
在composition api中使用h函數(shù)
下面為使用options api和componsiton api分別實(shí)現(xiàn)的計(jì)數(shù)器案例
如何在h函數(shù)中使用插槽？
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中使用svg-icon遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了vue3?父子組件間相互傳值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vuex存儲(chǔ)數(shù)據(jù)的幾種方法實(shí)例詳解
在瀏覽網(wǎng)頁時(shí)我們有些時(shí)候需要記住一些用戶選擇的信息,比如登陸時(shí)我們?nèi)绻x擇了記住密碼,那么我們下次進(jìn)入該網(wǎng)頁時(shí)就會(huì)有你上次的登陸信息,下面這篇文章主要給大家介紹了關(guān)于vuex存儲(chǔ)數(shù)據(jù)的幾種方法,需要的朋友可以參考下2022-10-10
vue2手機(jī)APP項(xiàng)目添加開屏廣告或者閃屏廣告
這篇文章主要為大家詳細(xì)介紹了vue2手機(jī)APP項(xiàng)目添加開屏廣告或者閃屏廣告的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vue路由跳轉(zhuǎn)與接收參數(shù)的實(shí)現(xiàn)方式
這篇文章主要介紹了Vue路由跳轉(zhuǎn)與接收參數(shù)的實(shí)現(xiàn)方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue封裝localStorage設(shè)置過期時(shí)間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過期時(shí)間的相關(guān)資料,在這個(gè)示例中,我們?cè)贛yComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來設(shè)置和獲取帶有過期時(shí)間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
在Vue模板中啟用這些表現(xiàn)力庫插件的最簡(jiǎn)單方法是在初始化項(xiàng)目時(shí)安裝它們,或使用 npm install（或 yarn add）安裝包,這篇文章主要介紹了Vue3中如何使用SCSS編寫樣式,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue的全局過濾器和私有過濾器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解
這篇文章主要介紹了vue 行為驗(yàn)證碼之滑動(dòng)驗(yàn)證AJ-Captcha使用詳解,AJ-Captcha不需要npm安裝，只需要將組件 verifition復(fù)制到所使用的components目錄下，本文給大家詳細(xì)講解，需要的朋友可以參考下2023-05-05
vue-cli+webpack記事本項(xiàng)目創(chuàng)建
這篇文章主要為大家詳細(xì)介紹了vue-cli+webpack創(chuàng)建記事本項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04