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