VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀
h()函數(shù)和createVNode()函數(shù)的使用
使用方法
- h(標(biāo)簽, {屬性},內(nèi)容)
- h(標(biāo)簽, {屬性},[可以繼續(xù)嵌套h()])
- createVNode(標(biāo)簽, {屬性},內(nèi)容)
- createVNode(標(biāo)簽, {屬性},[可以繼續(xù)嵌套createVNode()])
其實(shí)h()函數(shù)和createVNode()函數(shù)都是創(chuàng)建dom節(jié)點(diǎn),他們的作用是一樣的,但是在VUE3中createVNode()函數(shù)的功能比h()函數(shù)要多且做了性能優(yōu)化,渲染節(jié)點(diǎn)的速度也更快。
import { createApp } from "vue"; //import App from "./App.vue"; import { defineComponent, h, createVNode } from "vue"; import HelloWorld from "./components/HelloWorld.vue"; const img = require('./assets/logo.png'); // eslint-disable-line const App = defineComponent({ render() { return h("div", { id: "app" }, [ h("img", { src: img }), h(HelloWorld, { msg: "HelloWorld" }), createVNode("h1", { class: "hello" }, "HelloWorld") ] ); }, }); createApp(App).mount("#app");
渲染出來的結(jié)果為:
VUE3中h方法和createVnode的實(shí)現(xiàn)
h方法是給用戶來用的,它具備著多樣性。我們先來寫createVnode
在公共包shared里寫上ShapeFlags
采用二進(jìn)制來標(biāo)識(shí)某些東西
在runtime-core模塊里創(chuàng)建vnode.ts文件專門處理虛擬節(jié)點(diǎn)
虛擬節(jié)點(diǎn)有很多,組件的、元素的和文本的
用ShapeFlags來判斷是否是字符串,判斷兒子children是否是個(gè)數(shù)組
children不是數(shù)組類型,則標(biāo)識(shí)為text_children
將不同情況打上ShapeFlag標(biāo)識(shí)
最后把來共同標(biāo)識(shí)這個(gè)vode節(jié)點(diǎn)的類型
為了后續(xù)的diff算法,我們要給這個(gè)虛擬節(jié)點(diǎn)上加一些屬性和標(biāo)識(shí)
h的用法
h(‘div') h(‘div',{style:{‘color':‘red'}},‘hello') h(‘div',‘hello') h(‘div',h(‘span')) h(‘div',[h(‘span'),h(‘span')]) h(‘div',null,‘hello',‘world') h(‘div',null,h(‘span')) h(‘div',null,[h(‘span')])
創(chuàng)建h.ts文件來寫h方法
先判斷參數(shù)長(zhǎng)度
如果參數(shù)長(zhǎng)度等于2,那么我們要區(qū)分一下第二個(gè)參數(shù)是個(gè)h方法處理過的虛擬節(jié)點(diǎn),還是一個(gè)普通的屬性對(duì)象,或者是一個(gè)數(shù)組
如果第二個(gè)參數(shù)是不是一個(gè)數(shù)組并且也不是一個(gè)對(duì)象,那么判斷第二個(gè)參數(shù)是否是h方法處理過的虛擬節(jié)點(diǎn),如果是虛擬節(jié)點(diǎn),那么調(diào)用createVnode,第二個(gè)參數(shù)傳null,第三個(gè)參數(shù)包裝成數(shù)組。如果不是虛擬節(jié)點(diǎn),那肯定就是普通屬性
如果第二個(gè)參數(shù)是數(shù)組或者不是對(duì)象,第二個(gè)參數(shù)傳null,直接把propsChildren傳入第三個(gè)參數(shù),傳第三個(gè)參數(shù)后,都可以處理到,包括文本元素
如果參數(shù)長(zhǎng)度大于3,后續(xù)的參數(shù)包裝成一個(gè)數(shù)組
如果參數(shù)長(zhǎng)度等于3,并且children是一個(gè)虛擬節(jié)點(diǎn),children包裝成一個(gè)數(shù)組
最后統(tǒng)一調(diào)createVnode
總結(jié),其實(shí)我們上述的一系列判斷的核心是處理傳入createVnode的第三個(gè)參數(shù),這個(gè)參數(shù)只可能是文本或者數(shù)組
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+tsc+noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤問題及解決方法
當(dāng)我們新建vue3項(xiàng)目,package.json文件會(huì)自動(dòng)給我添加一些配置選項(xiàng),這寫選項(xiàng)基本沒有問題,但是在實(shí)際操作過程中,當(dāng)項(xiàng)目越來越復(fù)雜就會(huì)出現(xiàn)問題,本文給大家分享vue+tsc+noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤問題及解決方法,感興趣的朋友一起看看吧2023-10-10vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別
這篇文章主要介紹了vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11解決vue過濾器filters獲取不到this對(duì)象的問題
這篇文章主要介紹了解決vue過濾器filters獲取不到this對(duì)象的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01vue3.0如何修改瀏覽器標(biāo)題(靜態(tài))
這篇文章主要介紹了vue3.0如何修改瀏覽器標(biāo)題(靜態(tài)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue實(shí)現(xiàn)消息無縫滾動(dòng)效果
這篇文章介紹了vue實(shí)現(xiàn)消息無縫滾動(dòng)效果的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06vue+element創(chuàng)建動(dòng)態(tài)的form表單及動(dòng)態(tài)生成表格的行和列
這篇文章主要介紹了vue+element創(chuàng)建動(dòng)態(tài)的form表單及動(dòng)態(tài)生成表格的行和列 ,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05vue3中reactive和ref的實(shí)現(xiàn)與區(qū)別詳解
reactive和ref都是vue3實(shí)現(xiàn)響應(yīng)式系統(tǒng)的api,他們是如何實(shí)現(xiàn)響應(yīng)式的呢,reactive和ref又有什么區(qū)別呢,下面小編就來和大家詳細(xì)講講,希望對(duì)大家有所幫助2023-10-10