Vue3中的h函數及使用小結

2023-03-05 14:00:21

簡介

眾所周知，vue內部構建的其實是虛擬DOM，而虛擬DOM是由虛擬節點生成的，實質上虛擬節點也就是一個js物件
事實上，我們在vue中寫的template,最終也是經過渲染函數生成對應的VNode
而h函數就是用來生成VNode的一個函數，他的全名叫做createVNode

簡單使用

引數

他一共跟三個引數

第一個引數

是一個字串，他是必須的
這個字串可以是 html標籤名，一個元件、一個非同步的元件或者是函陣列件

第二個引數

是一個物件，可選的
與attribute、prop和事件相對應的物件

第三個引數

可以是字串、陣列或者是一個物件
他是VNodes，使用h函數來進行建立

使用

<script>
import { h } from 'vue'

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

</script>

渲染效果如下

當然我們還可以使用rener函數進行渲染

<script>
import { h } from 'vue'

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

計數器

<script>
import { h } from 'vue'

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

渲染如下

進階使用

函陣列件

我們先寫一個元件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>

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

<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函數同樣支援插槽，我們把HelloWorld元件改成一個插槽元件

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>

最終渲染如下

到此這篇關於Vue3中的h函數及使用小結的文章就介紹到這了,更多相關Vue3 h函數內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue3中的h函數及使用小結

目錄

簡介

簡單使用

引數

使用

進階使用

函陣列件

插槽

熱門文章