Vue3中的h函數如何使用

簡介

• 眾所周知，vue內部建構的其實是虛擬DOM，而虛擬DOM是由虛擬節點產生的，實質上虛擬節點也就是一個js物件

• 事實上，我們在vue中寫的template,最後也是經過渲染函數產生對應的VNode

• 而h函數就是用來產生VNode的一個函數，他的全名做createVNode

簡單用

參數

他一共跟三個參數

第一個參數

• 是一個字串，他是必須的

• 這個字串可以是html標籤名，一個元件、一個非同步的元件或是函數元件

#第二個參數

• 是一個對象，可選的

• 與attribute、prop和事件相對應的對象

第三個參數

• 可以是字串、陣列或是一個物件

• 他是VNodes，使用h函數來進行建立

使用

<script>
import { h } from &#39;vue&#39;

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

</script>

渲染效果如下

#當然我們也可以使用rener函數來渲染

<script>
import { h } from &#39;vue&#39;

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

計數器

<script>
import { h } from &#39;vue&#39;

export default {
    data() {
        return {
            counter: 0
        }
    },
    render() {
        return h("div", null, [
            h("h3", null, "计数器"),
            h("h4", null, `计数${this.counter}`),
            h("button", { onClick: () => this.counter++ },"点一下")
        ])
    }
}
</script>

渲染如下

進階使用

函數元件

我們先寫一個元件HelloWorld.vue

<script setup lang="ts">
import { ref } from &#39;vue&#39;;

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

<template>
    <h3 id="nbsp-param-nbsp">{{ param }}</h3>
</template>

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

然後，我們在h函數中引入這個元件，他就會被渲染

<script>
import { h } from &#39;vue&#39;

import HelloWorld from &#39;./HelloWorld.vue&#39;

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

插槽

h函數同樣支援插槽，我們把HelloWorld元件改成插槽元件

#HelloWorld.vue

<script setup lang="ts">
import { ref } from &#39;vue&#39;;

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

<template>
    <h3 id="nbsp-param-nbsp">{{ param }}</h3>
    <slot></slot>
</template>

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

index.ts

<script>
import { h } from &#39;vue&#39;

import HelloWorld from &#39;./HelloWorld.vue&#39;

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

最終渲染如下

#

以上是Vue3中的h函數如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！