vue中的h函數(shù)使用及說明
更新時間：2024年04月28日 09:19:24 作者：賣菜的小白
這篇文章主要介紹了vue中的h函數(shù)使用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue中的h函數(shù)使用
我們一般在編寫vue代碼時，會首先編寫模板代碼，也就是template標簽中的代碼。
如果我們想要比模板更加接近編譯器，此時我們可以使用渲染函數(shù)。
我們編寫的代碼轉(zhuǎn)化為真正的dom時，首先會先轉(zhuǎn)換為VNode，然后多個Vnode進行結(jié)合起來轉(zhuǎn)化為VDOM，最后VDOM才渲染成真實的DOM，此時我們思考一個問題，如果我們直接編寫生成vnode的代碼，效率會更高，這里我們就是h()函數(shù)。
h函數(shù)我們也可以稱為createVnode函數(shù)。
一、參數(shù)設(shè)置
h函數(shù) 接收三個參數(shù)。
- 第一個參數(shù)：可以為一個html標簽，一個組件，一個異步組件，或者是一個函數(shù)式組件。
- 第二個參數(shù)：{ Object } Props，與attributes和props,以及事件對應(yīng)的對象，我們可以在模板中使用，如果沒有需要傳入的屬性，可以設(shè)置為null。
- 第三個參數(shù)：{String | Object |Array}可以是字符串Text文本或者是h函數(shù)構(gòu)建的對象再者可以是有插槽的對象。
二、基本使用
在options api中使用h函數(shù)
在composition api中使用h函數(shù)
下面為使用options api和componsiton api分別實現(xiàn)的計數(shù)器案例
如何在h函數(shù)中使用插槽？
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue路由如何實現(xiàn)登錄攔截，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了Vue3在history模式下如何通過vite打包部署白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
使用Vue-Router 2實現(xiàn)路由功能實例詳解
vue-router 2只適用于Vue2.x版本，下面我們是基于vue2.0講的如何使用vue-router 2實現(xiàn)路由功能,需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)帶拖動和播放功能的時間軸,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了Vue實現(xiàn)導(dǎo)入Excel功能,本文分步驟給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-07-07
vue2.0嵌套路由實現(xiàn)豆瓣電影分頁功能(附demo)
這篇文章主要介紹了vue2.0嵌套路由實現(xiàn)豆瓣電影分頁功能(附demo),這里整理了詳細的代碼,有需要的小伙伴可以參考下。2017-03-03
這篇文章主要為大家講解了vue3?keepalive源碼解析解決線上問題，需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了uni-app 的模板語法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了利用vant如何給tabbar配置路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue項目中v-model和sync的區(qū)別及使用場景分析
在Vue項目中,v-model和.sync是實現(xiàn)父子組件雙向綁定的兩種方式,v-model主要用于表單元素和子組件的雙向綁定,通過modelValue和update:modelValue實現(xiàn),.sync修飾符則用于同步prop值,適合在子組件內(nèi)更新父組件prop值的場景,通過update:propName事件實現(xiàn)2024-11-11