h()函數(shù)和createVNode()函數(shù)的使用

使用方法

• h(標簽, {屬性},內(nèi)容)
• h(標簽, {屬性},[可以繼續(xù)嵌套h()])
• createVNode(標簽, {屬性},內(nèi)容)
• createVNode(標簽, {屬性},[可以繼續(xù)嵌套createVNode()])

其實h()函數(shù)和createVNode()函數(shù)都是創(chuàng)建dom節(jié)點，他們的作用是一樣的，但是在VUE3中createVNode()函數(shù)的功能比h()函數(shù)要多且做了性能優(yōu)化，渲染節(jié)點的速度也更快。

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的實現(xiàn)

h方法是給用戶來用的，它具備著多樣性。我們先來寫createVnode

在公共包shared里寫上ShapeFlags

采用二進制來標識某些東西

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

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

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

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

將不同情況打上ShapeFlag標識

最后把來共同標識這個vode節(jié)點的類型

為了后續(xù)的diff算法，我們要給這個虛擬節(jié)點上加一些屬性和標識 

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ù)長度

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

如果第二個參數(shù)是不是一個數(shù)組并且也不是一個對象，那么判斷第二個參數(shù)是否是h方法處理過的虛擬節(jié)點，如果是虛擬節(jié)點，那么調(diào)用createVnode，第二個參數(shù)傳null，第三個參數(shù)包裝成數(shù)組。如果不是虛擬節(jié)點，那肯定就是普通屬性

如果第二個參數(shù)是數(shù)組或者不是對象，第二個參數(shù)傳null，直接把propsChildren傳入第三個參數(shù)，傳第三個參數(shù)后，都可以處理到，包括文本元素

如果參數(shù)長度大于3，后續(xù)的參數(shù)包裝成一個數(shù)組

如果參數(shù)長度等于3，并且children是一個虛擬節(jié)點，children包裝成一個數(shù)組

最后統(tǒng)一調(diào)createVnode

總結(jié)，其實我們上述的一系列判斷的核心是處理傳入createVnode的第三個參數(shù)，這個參數(shù)只可能是文本或者數(shù)組

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論