vue多功能渲染函数h()的使用和多种应用场景

 更新时间:2024年08月05日 08:23:46   作者:天天鸭  
我们在vue项目里面用HTML标签构建页面时最终会被转化成vnode,而h()是直接创建vnode,因此h()能以一种更灵活的方式在各种各样情景下构建组件的渲染逻辑,并且能带来性能方式的提升,本文介绍如何使用和列出具体的应用场景,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

前言

按照vue官方的介绍,h()渲染函数是用来创建虚拟 DOM 节点 vnode。我们在vue项目里面用HTML标签构建页面时最终会被转化成vnode,而h()是直接创建vnode,因此h()能以一种更灵活的方式在各种各样情景下构建组件的渲染逻辑,并且能带来性能方式的提升。下面介绍如何使用和列出具体的应用场景:

一、 h()渲染函数使用语法

如下所示,主要有三个参数,其中第2第3个参数都是可选的

  • type: 要创建的节点类型,可以是HTML 标签、组件或函数(函数式组件)。
  • props(可选): 节点的属性对象,传递的 prop。
  • children(可选): 节点的子节点,可以是字符串、数组或其他 vnode。
1
2
3
4
5
6
7
8
9
// 语法格式
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode
 
// 基本使用示例
h('div', { id: 'foo' }, 'Hello我是天天鸭!');

h 函数的参数详解

(1)type 参数:

  • HTML 标签: 如果 type 是一个字符串,它会被识别解析为一个 HTML 标签。
  • 组件: 如果 type 是一个对象或函数,那么会被解析为一个 Vue 的组件。
  • 异步组件: type 还可以是一个返回 Promise 的函数, Promise 会被解析为组件。

(2)props 参数:

  • props是可选参数,用来指定该节点的属性参数。如果传递了 props,侧应该是传递一个对象,里面包含传递给节点的属性名和值。
  • 如果传递 props,可以传递 null。

(3)children 参数:

  • children是可选参数,用于指定当前节点的子节点。子节点同理可以是字符串、数组或 vnode 对象。
  • 如果子节点是数组,则数组中的每个元素都是该节点的子节点。
  • 如果子节点是一个函数,则该函数会在渲染时被调用,并且其返回值将作为子节点。

二、具体应用示例

只看使用语法可能不太好理解什么时候应该使用h()函数,下面直接列举出真实项目中的几种适合使用h()的业务场景。

(1)动态渲染组件

如下所示,结合component实现动态组件,这种算是最常用的业务场景之一了,但很多人在这种情况并不会用h()实现些功能。 其实用上h()能避免模板编译的开销,在这场景下可以带来性能上的优化,并且处理起来也更灵活。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <button @click="changeComponent">切换动态组件</button>
  <component :is="createComponent()" />
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
 
const nowComponent = ref('ComponentA');
 
function changeComponent() {
  nowComponent.value = nowComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA';
}
 
const createComponent = () => {
  return h(nowComponent.value === 'ComponentA' ? ComponentA : ComponentB);
};
</script>

(2)创建函数式组件

h()创建函数式组件既能独立抽离维护,又不用额外多创建一个.vue文件,真的不要太实用了。这种方式非常适合用于简单的 UI 组件,可以显著简化代码并且提高性能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <FunctionalComponent text="这是函数式组件" @click="handleClick" />
</template>
 
<script setup lang="ts">
import { h, defineEmits } from 'vue';
 
const FunctionalComponent = (props, context) => {
  return h('div', null, [
    h('p', null, props.text),
    h('button', { onClick: context.emit.bind(context, 'click') }, '点击我')
  ]);
};
 
const emit = defineEmits(['click']);
 
function handleClick() {
  console.log('handleClick');
}
</script>

如上所示,就是典型的函数式组件使用方法,其中包含了如何在父子组件中与之交互。函数式组件 FunctionalComponent 接收 propscontext 参数,并使用 h() 函数来构建页面。同时再通过 context.emit 方法来触发父组件中的事件处理器。

注意: props 用于接收父组件传递过来的属性。context 用于访问组件上下文,如 slots插槽和方法事件的。

(3)渲染动态属性

一个组件或者一个标签如果需要定义一些动态属性,那么用h()渲染函数就相当方便了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <button @click="myVisibility">切换组件显示状态</button>
  <component :is="componentWithProps()" />
</template>
 
<script setup lang="ts">
  import { ref } from 'vue';
 
  const visible = ref(true);
 
  function myVisibility() {
    visible.value = !visible.value;
  }
 
  const componentWithProps = () => {
    return h('div', { class: { visible: visible.value } }, '我是div');
  };
</script>

如上所示,h()函数里面根据 visible 的值来决定 vnode 是否具有 visible 这个类,当点击按钮时实现动态样式。当然了,动态类只是一个例子,其实h()里面的各种属性或者说子组件都能动态,灵活性远超用HTML实现。

(4)使用插槽

h()如果结合函数式组件和插槽来传递内容,能提高使用时的灵活性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <SlotComponent>
    <template #default>
      <p>我是插槽里面</p>
    </template>
  </SlotComponent>
</template>
 
<script setup lang="ts">
import { h } from 'vue';
 
const SlotComponent = (props, context) => {
  return h('div', null, [
    h('p', null, '插槽里面:'),
    context.slots.default && context.slots.default()
  ]);
};
</script>

如上所示,引用 SlotComponent组件时,其内部的 <template> 标签中的内容会被作为默认插槽的内容传递给 SlotComponent组件。并且能通过 context.slots.default() 来获取并渲染默认插槽里面的内容。因此当我们封装一个函数式组件,但里面有某一部分是动态的时候,就特别适合这样通过插槽去灵活使用。

注意: props 用于接收父组件传递过来的属性。context 用于访问组件上下文,如 slots插槽和方法事件的。

(5)创建动态标签

如下代码是 h() 函数结合动态组件来实现在不同的 HTML 标签之间的切换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <button @click="changeTag">切换标签</button>
  <component :is="createElement()" />
</template>
 
<script setup lang="ts">
import { ref } from 'vue';
 
const tag = ref('div');
 
function changeTag() {
  tag.value = tag.value === 'div' ? 'section' : 'div';
}
 
const createElement = () => {
  return h(tag.value, null, '动态标签');
};
</script>

如上所示,其实就是根据 tag 的值来决定返回哪个 HTML 标签的 VNode,如果业务逻辑涉及到标签的动态变化时就相当好用,避免使用v-if产生大量重复代码。

小结

总结下来就会发现,其实h()渲染函数适用的应用场景非常多并且用法相当灵活,绝对是万金油函数。以上是我总结的几种实用场景,如有哪里写的不对或者有更好的建议欢迎大佬指点一二啊。

以上就是vue多功能渲染函数h()的使用和多种应用场景的详细内容,更多关于vue渲染函数h()的用法的资料请关注脚本之家其它相关文章!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://juejin.cn/post/7398728505872810011

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Vue+ElementUI使用vue-pdf实现预览功能

    Vue+ElementUI使用vue-pdf实现预览功能

    这篇文章主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • Vue实现路由跳转至外界页面

    Vue实现路由跳转至外界页面

    这篇文章主要介绍了Vue实现路由跳转至外界页面方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vxe-table中vxe-grid的使用解读

    vxe-table中vxe-grid的使用解读

    这篇文章主要介绍了vxe-table中vxe-grid的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • element带输入建议el-autocomplete的使用

    element带输入建议el-autocomplete的使用

    本文主要介绍了element带输入建议el-autocomplete的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue编写简单的购物车功能

    vue编写简单的购物车功能

    这篇文章主要为大家详细介绍了vue编写简单的购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • vue.js的手脚架vue-cli项目搭建的步骤

    vue.js的手脚架vue-cli项目搭建的步骤

    这篇文章主要介绍了vue.js的手脚架vue-cli项目搭建的步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue mixins组件复用的几种方式(小结)

    vue mixins组件复用的几种方式(小结)

    这篇文章主要介绍了vue mixins组件复用的几种方式(小结),vue中提供了一种混合机制mixins,用来更高效的实现组件内容的复用,有兴趣的可以了解一下
    2017-09-09
  • vue登录路由权限管理的项目实践

    vue登录路由权限管理的项目实践

    在开发Web应用程序时,常常需要进行登录验证和权限管理,本文主要介绍了vue登录路由权限管理的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue去除数组指定位置元素的几种方法

    vue去除数组指定位置元素的几种方法

    这篇文章主要介绍了vue剔除数组指定位置元素的几种方法,文中主要介绍了单个去除和批量去除这两种方法,并通过代码示例讲解的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue+elementui 表格分页限制最大页码数的操作代码

    vue+elementui 表格分页限制最大页码数的操作代码

    这篇文章主要介绍了vue+elementui 表格分页限制最大页码数的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08

最新评论