Vue3中的h函数

文章目录

专栏目录请点击

简介

1. 众所周知，vue内部构建的其实是虚拟DOM，而虚拟DOM是由虚拟节点生成的，实质上虚拟节点也就是一个js对象
2. 事实上，我们在vue中写的template,最终也是经过渲染函数生成对应的VNode
3. 而h函数就是用来生成VNode的一个函数，他的全名叫做createVNode

简单使用

参数

他一共跟三个参数

第一个参数

• 是一个字符串，他是必须的
• 这个字符串可以是 html标签名，一个组件、一个异步的组件或者是函数组件

第二个参数

• 是一个对象，可选的
• 与attribute、prop和事件相对应的对象

第三个参数

• 可以是字符串、数组或者是一个对象
• 他是VNodes，使用h函数来进行创建

使用

<script>import{ h }from'vue'exportdefault{setup(){return()=>h("h2",null,"Hello World")}}</script>

渲染效果如下

当然我们还可以使用rener函数进行渲染

<script>import{ h }from'vue'exportdefault{render(){returnh("h2",null,"Hello World")}}</script>

计数器

<script>import{ h }from'vue'exportdefault{data(){return{counter:0}},render(){returnh("div",null,[h("h2",null,"计数器"),h("h3",null,`计数${this.counter}`),h("button",{onClick:()=>this.counter++},"点一下")])}}</script>

渲染如下

进阶使用

函数组件

我们先写一个组件

HelloWorld.vue

<scriptsetuplang="ts">import{ ref }from'vue';const param =ref("Hello World")</script><template><h2>{{ param }}</h2></template><stylescopedlang="less"></style>

然后，我们在h函数中引入这个组件，他就会被渲染

<script>import{ h }from'vue'import HelloWorld from'./HelloWorld.vue'exportdefault{data(){return{counter:0}},render(){returnh("div",null,[h(HelloWorld)])}}</script>

插槽

h函数同样支持插槽，我们把HelloWorld组件改成一个插槽组件

HelloWorld.vue

<scriptsetuplang="ts">import{ ref }from'vue';const param =ref("Hello World")</script><template><h2>{{ param }}</h2><slot></slot></template><stylescopedlang="less"></style>

index.ts

<script>import{ h }from'vue'import HelloWorld from'./HelloWorld.vue'exportdefault{data(){return{counter:0}},render(){returnh("div",null,[h(HelloWorld,{},[h("div",null,"Hello Slot")])])}}</script>

最终渲染如下