Vue 3 中的 h 和 mergeProps 应用程序接口详解
最编程
2024-05-08 07:34:42
...
前言
在 Vue 3 中,随着 Composition API 的引入,我们有了更多的灵活性和控制权来构建我们的组件。其中,h()
函数和 mergeProps()
是在构建渲染函数或 JSX/TSX 时经常使用的两个工具。下面,我将对这两个 API 进行详细的解释。
h()
函数
h()
函数,也被称为 createElement
,是 Vue 3 中用于创建虚拟 DOM 节点的函数。它通常用于 JSX/TSX 语法中,或者当你需要手动编写渲染函数时。h()
函数接受三个参数:
-
tag
:一个字符串,作为元素的名称;或者一个组件对象。 -
data
:一个包含组件的 props/attributes、DOM 属性、DOM 属性修饰符、插槽等的对象。 -
children
:子虚拟节点 (VNodes),由h()
或其他合法的参数(如字符串、数字等)创建。
使用示例:
import { h, createApp } from 'vue'
const HelloWorld = {
render() {
return h('div', 'Hello, World!')
}
}
const App = {
render() {
return h('div', [
h('h1', 'Welcome to My App'),
h(HelloWorld)
])
}
}
createApp(App).mount('#app')
在这个例子中,h()
函数被用来创建 div
元素和 HelloWorld
组件的虚拟 DOM 节点。这些节点随后被 Vue 的运行时系统用来更新实际的 DOM。
mergeProps()
函数
mergeProps()
是 Vue 3 的内部 API,它用于合并多个 props 对象。当你在使用 setup()
函数或渲染函数时,有时你可能需要合并来自不同来源的 props,这时 mergeProps()
就派上了用场。虽然这个 API 主要用于内部,但在某些高级场景中,了解它的工作原理也是很有帮助的。
注意: 在大多数情况下,你不需要直接使用 mergeProps()
,因为 Vue 会自动为你处理 props 的合并。但在编写自定义高阶组件或工具函数时,了解它的工作原理可能是有用的。
为什么要使用这些函数?
-
h()
函数是 Vue 3 虚拟 DOM 系统的基础。它允许你以编程的方式描述 UI 的结构,这对于构建动态和可复用的 UI 组件非常有用。 -
mergeProps()
(尽管不直接暴露给开发者)在内部处理 props 的合并,确保了当多个 props 来源(如父组件传递的 props、组件自身的 props 默认值等)存在时,能够正确地合并这些 props。
通过理解这两个函数的工作原理,你可以更深入地了解 Vue 3 的工作机制和如何更高效地编写 Vue 组件。
上一篇: 摘录 2:人民日报金句
推荐阅读
-
Vue 3 中的 h 和 mergeProps 应用程序接口详解
-
【Vue3】toRefs和toRef在reactive中的一些应用-????介绍toRef(不常用)
-
玩转Java底层:JMX详解 - jconsole与自定义MBean监控工具的实际应用与区别" 在日常JVM调优中,我们熟知的jconsole工具通过JMX包装的bean以图形化形式展示管理数据,而像jstat和jmap这类内建监控工具则由JVM直接支持。本文将以jconsole为例,深入讲解其实质——基于JMX的MBean功能,包括可视化界面上的bean属性查看和操作调用。 MBeans在jconsole中的体现是那些可观察的组件属性和方法,如上图所示,通过名为"Verbose"的属性能看到其值为false,同时还能直接操作该bean的方法,例如"closeJerryMBean"。 尽管jconsole给我们提供了直观的可视化界面,但请注意,这里的MBean并非固定不变,开发者可根据JMX提供的接口将自己的自定义bean展示到jconsole。以下步骤展示了如何创建并注册一个名为"StudyJavaMBean"的自定义MBean: 1. 首先定义接口`StudyJavaMBean`,接口需遵循MBean规范,即后缀为"MBean"且包含getter方法代表属性,如`getApplicationName`,和无返回值的setter方法代表操作,如`closeJerryMBean`。 ```java public interface StudyJavaMBean { String getApplicationName(); void closeJerryMBean(); } ``` 2. 编写接口的实现类`StudyJavaMBeanImpl`,实现接口中的方法: ```java public class StudyJavaMBeanImpl implements StudyJavaMBean { @Override public String getApplicationName() { return "每天学Java"; } @Override public void closeJerryMBean() { System.out.println("关闭Jerry应用"); } } ``` 3. 在代码中注册自定义MBean,涉及的关键步骤包括: - 获取平台MBeanServer - 定义ObjectName,指定唯一的MBean标识符 - 注册MBean到服务器 - 启动RMI连接器服务,以便jconsole能够访问 ```java public void registerMBean() throws Exception { // ... 具体实现省略 ... } ``` 实际运行注册后的MBean,您将在jconsole中发现并查看自定义bean的属性和调用相关方法。然而,这种方式相较于传统的属性/日志查看和HTTP接口,实用性相对有限,可能存在潜在的安全风险。但不可否认的是,JMX及其MBean机制对于获取操作系统信息、内存状态等关键性能指标仍然具有重要价值。例如: 1. **获取操作系统信息**:通过JMX MBean,可以直接获取到诸如CPU使用率、操作系统版本等系统级信息,这对于资源管理和优化工作具有显著帮助。
-
Linux设备驱动开发详解——学习笔记-设备驱动来联系。在没有操作系统的情况下,工程师可以根据硬件设备的特点自行定义接口。而在有操作系统的情况下,驱动的架构则由相应的操作系统来定义。驱动存在的意义就是给上层应用提供便利。 驱动针对的对象是存储器和外设。Linux将存储器和外设分为 3 个基础大类:字符设备、块设备、网络设备。 字符设备和块设备都被 Linux 映射到文件系统的文件和目录中,通过文件系统的接口(open、read、write、close等)来访问。其中,块设备可以通过类似 dd 命令对应的原始块设备来访问,也可以通过建立文件系统,以文件路径来访问。 学习 Linux 设备驱动,要求非常好的硬件基础、非常好的软件基础、一定的 Linux 内核基础和非常好的多任务并发控制和同步的基础。学习 Linux 设备驱动要将学习的函数、数据结构等放到整体架构中去理解,才能理清驱动中各组成部分之间的关系。 驱动设计的硬件基础 驱动工程师需要掌握 处理器、存储器、接口和总线、可编程门电路、原理图、硬件时序、芯片手册、仪器使用 等方面的内容。 处理器