Vue3中的h函數(shù)及使用小結(jié)

更新時(shí)間：2023年03月04日 14:52:28 作者：youhebuke225

這篇文章主要介紹了Vue3中的h函數(shù)及使用小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

簡(jiǎn)介

眾所周知，vue內(nèi)部構(gòu)建的其實(shí)是虛擬DOM，而虛擬DOM是由虛擬節(jié)點(diǎn)生成的，實(shí)質(zhì)上虛擬節(jié)點(diǎn)也就是一個(gè)js對(duì)象
事實(shí)上，我們?cè)趘ue中寫(xiě)的template,最終也是經(jīng)過(guò)渲染函數(shù)生成對(duì)應(yīng)的VNode
而h函數(shù)就是用來(lái)生成VNode的一個(gè)函數(shù)，他的全名叫做createVNode

簡(jiǎn)單使用

參數(shù)

他一共跟三個(gè)參數(shù)

在這里插入圖片描述

第一個(gè)參數(shù)

是一個(gè)字符串，他是必須的
這個(gè)字符串可以是 html標(biāo)簽名，一個(gè)組件、一個(gè)異步的組件或者是函數(shù)組件

第二個(gè)參數(shù)

是一個(gè)對(duì)象，可選的
與attribute、prop和事件相對(duì)應(yīng)的對(duì)象

第三個(gè)參數(shù)

可以是字符串、數(shù)組或者是一個(gè)對(duì)象
他是VNodes，使用h函數(shù)來(lái)進(jìn)行創(chuàng)建

使用

<script>
import { h } from 'vue'

export default {
    setup() {
        return () => h("h2", null, "Hello World")
    }
}

</script>

渲染效果如下

在這里插入圖片描述

當(dāng)然我們還可以使用rener函數(shù)進(jìn)行渲染

<script>
import { h } from 'vue'

export default {
    render() {
        return h("h2", null, "Hello World")
    }
}
</script>

計(jì)數(shù)器

<script>
import { h } from 'vue'

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [
            h("h2", null, "計(jì)數(shù)器"),
            h("h3", null, `計(jì)數(shù)${this.counter}`),
            h("button", { onClick: () => this.counter++ },"點(diǎn)一下")
        ])
    }
}
</script>

渲染如下

在這里插入圖片描述

進(jìn)階使用

函數(shù)組件

我們先寫(xiě)一個(gè)組件HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue';

const param = ref("Hello World") 
</script>

<template>
    <h2>{{ param }}</h2>
</template>

<style scoped lang="less"></style>

然后，我們?cè)趆函數(shù)中引入這個(gè)組件，他就會(huì)被渲染

<script>
import { h } from 'vue'

import HelloWorld from './HelloWorld.vue'

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [h(HelloWorld)])
    }
}
</script>

在這里插入圖片描述

插槽

h函數(shù)同樣支持插槽，我們把HelloWorld組件改成一個(gè)插槽組件

HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue';

const param = ref("Hello World") 
</script>

<template>
    <h2>{{ param }}</h2>
    <slot></slot>
</template>

<style scoped lang="less"></style>

index.ts

<script>
import { h } from 'vue'

import HelloWorld from './HelloWorld.vue'

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [h(HelloWorld, {}, [h("div", null, "Hello Slot")])])
    }
}
</script>

最終渲染如下

在這里插入圖片描述