Vue3中的h函数及使用小结

更新时间：2023年03月04日 14:52:28 作者：youhebuke225

这篇文章主要介绍了Vue3中的h函数及使用小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

简介

众所周知，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函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue如何封装Axios的get、post请求
这篇文章主要介绍了vue如何封装Axios的get、post请求，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
浅谈vue,angular,react数据双向绑定原理分析
本篇文章主要介绍了浅谈vue,angular,react数据双向绑定原理分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
vue中.env文件配置环境变量的实现
本文主要介绍了vue中.env文件配置环境变量的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
vue之使用echarts图表setOption多次很卡问题及解决
这篇文章主要介绍了vue之使用echarts图表setOption多次很卡问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue工程如何为组件自动注入全局样式文件
这篇文章主要介绍了vue工程如何为组件自动注入全局样式文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue Cli项目重构为Vite的方法步骤
本文主要介绍了Vue Cli项目重构为Vite的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
Vue实现牌面翻转效果
这篇文章主要为大家详细介绍了Vue实现牌面翻转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-07-07
Vue实现锁屏功能的示例代码
这篇文章主要为大家详细介绍了如何利用Vue实现简单的锁屏功能，文中的示例代码讲解详细，具有一定的参考价值，需要的小伙伴可以了解一下
2023-06-06
vue element 关闭当前tab 跳转到上一路由操作
这篇文章主要介绍了vue element 关闭当前tab 跳转到上一路由操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue-calendar-component 封装多日期选择组件的实例代码
这篇文章主要介绍了vue-calendar-component 封装多日期选择组件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12