眾所周知，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("h3", null, "Hello World")
}
}
</script>渲染效果如下
#當然我們也可以使用rener函數來渲染
<script>
import { h } from 'vue'
export default {
render() {
return h("h3", null, "Hello World")
}
}
</script>計數器
<script>
import { h } from 'vue'
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 'vue';
const param = ref("Hello World")
</script>
<template>
<h3>{{ param }}</h3>
</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>
<h3>{{ param }}</h3>
<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函數如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
