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");

渲染出來(lái)的結(jié)果為：

VUE3中h方法和createVnode的實(shí)現(xiàn)

h方法是給用戶來(lái)用的，它具備著多樣性。我們先來(lái)寫(xiě)createVnode

在公共包shared里寫(xiě)上ShapeFlags

采用二進(jìn)制來(lái)標(biāo)識(shí)某些東西

在runtime-core模塊里創(chuàng)建vnode.ts文件專門(mén)處理虛擬節(jié)點(diǎn)

虛擬節(jié)點(diǎn)有很多，組件的、元素的和文本的

用ShapeFlags來(lái)判斷是否是字符串，判斷兒子children是否是個(gè)數(shù)組

children不是數(shù)組類型，則標(biāo)識(shí)為text_children

將不同情況打上ShapeFlag標(biāo)識(shí)

最后把來(lái)共同標(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文件來(lái)寫(xiě)h方法

先判斷參數(shù)長(zhǎng)度

如果參數(shù)長(zhǎng)度等于2，那么我們要區(qū)分一下第二個(gè)參數(shù)是個(gè)h方法處理過(guò)的虛擬節(jié)點(diǎn)，還是一個(gè)普通的屬性對(duì)象，或者是一個(gè)數(shù)組

如果第二個(gè)參數(shù)是不是一個(gè)數(shù)組并且也不是一個(gè)對(duì)象，那么判斷第二個(gè)參數(shù)是否是h方法處理過(guò)的虛擬節(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è)參考，也希望大家多多支持腳本之家。