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.prevent
  onClick: withModifiers(() => {
    // ...
  }, ['stop', 'prevent'])
})