Vue3 渲染函数 API（五）
h()
h 函数用于创建并返回一个虚拟节点（VNode）
h(
tag, // HTML 标签名、组件对象或异步组件函数
data, // 一个包含组件的props/attrs/domProps/on 等的对象
children // 子虚拟节点 (VNodes)，由h()构建而成， // 也可以使用字符串来生成“文本虚拟节点”
)
import { h, createApp } from 'vue' const MyComponent = { render() { return h('div', { class: 'my-class', onClick: () => console.log('Clicked!'), }, [ h('span', 'Hello, '), h('strong', 'Vue 3!'), ]) }
} createApp(MyComponent).mount('#app')
mergeProps()
- mergeProps 并不是一个直接暴露给开发者的函数。然而，在 Vue 的内部实现中，mergeProps 确实被用来合并来自不同来源的属性（props）和属性数据（attributes），特别是当使用高阶组件（Higher-Order Components, HOCs）或组件组合（Composition）时。
- 虽然开发者通常不需要直接调用 mergeProps，但了解它的工作原理可以帮助你更好地理解 Vue 的渲染过程。
- mergeProps 的主要作用是将多个属性对象合并为一个单一的属性对象。在 Vue 的上下文中，这通常涉及将组件的 props、attrs、class、style 等合并到一个最终的属性对象中，以便在创建虚拟 DOM 节点（VNode）时使用。
cloneVNode()
克隆一个 vnode。
- 返回一个克隆的 vnode，可在原有基础上添加一些额外的 prop。
- Vnode 被认为是一旦创建就不能修改的，你不应该修改已创建的 vnode 的 prop，而应该附带不同的/额外的 prop 来克隆它。
- Vnode 具有特殊的内部属性，因此克隆它并不像 object spread 一样简单。cloneVNode() 处理了大部分这样的内部逻辑。
isVNode()
判断一个值是否为 vnode 类型。
resolveComponent()
按名称手动解析已注册的组件。
- 为了能从正确的组件上下文进行解析，resolveComponent() 必须在setup() 或渲染函数内调用。
- 如果组件未找到，会抛出一个运行时警告，并返回组件名字符串。
import { h, resolveComponent } from 'vue'export default {setup() {const ButtonCounter = resolveComponent('ButtonCounter')return () => {return h(ButtonCounter)}}
}
resolveDirective()
按名称手动解析已注册的指令。
- 为了能从正确的组件上下文进行解析，resolveDirective() 必须在setup() 或渲染函数内调用。
- 如果指令没有找到，会抛出一个运行时警告，并返回 undefined。
withDirectives()
用于给 vnode 增加自定义指令。
用自定义指令包装一个现有的 vnode。第二个参数是自定义指令数组。每个自定义指令也可以表示为 [Directive, value, argument, modifiers] 形式的数组。如果不需要，可以省略数组的尾元素。
import { h, withDirectives } from 'vue'// 一个自定义指令
const pin = {mounted() {/* ... */},updated() {/* ... */}
}// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [[pin, 200, 'top', { animate: true }]
])
withModifiers()
用于向事件处理函数添加内置 v-on 修饰符。
import { h, withModifiers } from 'vue'const vnode = h('button', {// 等价于 v-on:click.stop.preventonClick: withModifiers(() => {// ...}, ['stop', 'prevent'])
})