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