Vue3中的h函数及使用小结

Vue3 h函数 Vue3 h函数用法 2023-03-06 08:03:54 910人浏览八月长安

摘要

目录简介简单使用参数使用进阶使用函数组件插槽参考资料：专栏目录请点击简介众所周知，Vue内部构建的其实是虚拟DOM，而虚拟DOM是由虚拟节点生成的，实质上虚拟节点也就是一个js对

简介

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

--结束END--

本文标题: Vue3中的h函数及使用小结

本文链接: https://lsjlt.com/news/198530.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

Vue3中的h函数及使用小结

目录简介简单使用参数使用进阶使用函数组件插槽参考资料：专栏目录请点击简介众所周知，vue内部构建的其实是虚拟DOM，而虚拟DOM是由虚拟节点生成的，实质上虚拟节点也就是一个js对...

99+

2023-03-06

Vue3 h函数 Vue3 h函数用法
Vue3中的h函数如何使用

HelloWorld.vue<script setup lang="ts"> import { ref } from 'vue'; const param = ref("Hello...

99+

2023-05-14

Vue3
Vue3中的h函数怎么使用

这篇文章主要讲解了“Vue3中的h函数怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3中的h函数怎么使用”吧！简介众所周知，vue内部构建的其实是虚拟DOM，而虚拟DOM是由虚...

99+

2023-07-06
VUE3中h()函数和createVNode()函数的使用解读

目录h()函数和createVNode()函数的使用使用方法VUE3中h方法和createVnode的实现在公共包shared里写上ShapeFlags在runtime-core模块...

99+

2024-04-02
vue2.x中h函数(createElement)与vue3中的h函数详解

目录1. vue2.x的 h 函数(createElement)2. vue3 h函数配置项2.1 v-model实现（以下开始为官网实现）2.2 v-on2.3 事件修饰符2.4 ...

99+

2022-12-24

vue3 h函数 vue h函数 vue2.x h函数
vue3渲染函数(h函数)的变更剖析

目录vue3 渲染函数(h函数)的更改h函数的三个参数详细说明VNode Props 格式化 vue2.x 语法VNode Props 格式化 vue3.x 语法vue2中rende...

99+

2022-11-13

vue3渲染函数 vue3 h函数
vue3中hooks的概述及用法小结

目录一、什么是hooks二、hooks的用法大家好，今天这篇文章是介绍一下vue3中的hooks以及它的用法。本文内容主要有以下两点：什么是hooksvue3中hooks的使用方...

99+

2023-03-07

vue3中hooks使用 vue3 hooks
Vue3 中的 readonly 特性及函数使用详解

目录Vue3 中的 readonly 特性详解补充：vue3中的readonly单向数据流函数（readonly函数使用详解）一、注意：二、reactive 和 readonly三、...

99+

2023-05-18

Vue3 readonly readonly函数使用
Vue h函数的使用详解

目录一、认识二、使用1、h() 参数2、简单的使用3、实现一个计数器案例4、函数组件和插槽的使用三、jsx的使用1、jsx的认识2、下载Babel插件支持vue（现在貌似脚手架直接支...

99+

2024-04-02
Vue3 中 watch 与 watchEffect 区别及用法小结

目录响应式依赖收集WatchWatchEffect什么时候用什么？大部分时候用 watch 显式的指定依赖以避免不必要的重复触发，也避免在后续代码修改或重构时不小心引入新的依赖。wa...

99+

2024-04-02
React Hook中的useEffecfa函数的使用小结

目录useEffect的详细解析useEffecf基本使用清除副作用(Effect)使用多个useEffectuseEffect性能优化useEffect的详细解析 useEffec...

99+

2022-11-13

React Hook useEffecfa函数 React Hook用法 React useEffecfa函数
浅析JavaScript中的特殊函数及用法小结

目录写在前面匿名函数回调函数自调函数作为值的函数写在前面 JavaScript中的函数本质上是一个对象，我们可以将这个对象赋值给一个变量，这就使JavaScript中的函...

99+

2024-04-02
vue3中的ref,toRef,toRefs三个的作用使用小结

目录1. ref的使用2. toRef的使用3. toRefs的使用4.总结1. ref的使用 ref 接受一个原始值，返回一个具有响应式的对...

99+

2022-11-16

vue3 ref toRef toRefs vue3 ref toRef toRefs区别
关于vue3中setup函数的使用

概述一、初识setup函数组件中所用到的：数据、方法等等均要配置在setup中，这也就意味着在Vue2中写的data、methods在这里都不再推荐使...

99+

2024-04-02
vue3中的setup函数如何使用

这篇文章主要讲解了“vue3中的setup函数如何使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3中的setup函数如何使用”吧！概述一、初识setup函数 ...

99+

2023-06-30
Linux中popen函数的作用小结

简单说一下popen()函数函数定义 #include <stdio.h> FILE * popen(const char *command , const char *type ); int pclo...

99+

2022-06-04

linux probe函数作用 linux probe函数
vue3 中的toRef函数和toRefs函数的基本使用

目录这篇我们看下toRef和toRefs的基本使用Vue3的toRef这篇我们看下toRef和toRefs的基本使用我们知道ref可以用于创建一个响应式数据，而toRef也可以创建...

99+

2022-11-16

vue3 toRef和toRefs函数 vue3 toRef函数和toRefs函数 vue3 toRef函数
SqlServer常用函数及时间处理小结

YEAR() 函数返回一个整数值，它表示指定日期的年份，一般使用为：Year(时间)，如： YEAR('2023-03-14 16:50:08.543')--2023 REPLACE() 字符串替换函...

99+

2023-05-05

SqlServer常用函数 SqlServer时间函数
Golang接口型函数使用小结

目录常规接口实现接口型函数出场进一步改造什么是接口型函数？顾名思义接口函数指的是用函数实现接口，这样在调用的时候就会非常简便，这种方式适用于只有一个函数的接口。这里以迭代一个map...

99+

2024-04-02
Vue3 中的模板语法小结

目录前言一、什么是模板语法？二、内容渲染指令1. v-text2. {{ }} 插值表达式3. v-html三、双向绑定指令1. v-model2. v-model的修饰符四、属性绑...

99+

2023-03-06

vue3模板语法 vue模板语法