渲染函数 API

h()

创建虚拟 DOM 节点（vnode）。

类型

// full signature
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode

// omitting props
function h(type: string | Component, children?: Children | Slot): VNode

type Children = string | number | boolean | VNode | null | Children[]

type Slot = () => Children

type Slots = { [name: string]: Slot }

类型已简化以提高可读性。

详细信息
第一个参数可以是字符串（用于原生元素）或 Vue 组件定义。第二个参数是要传递的属性，第三个参数是子节点。
在创建组件 vnode 时，子节点必须以槽函数的形式传递。如果组件只期望默认槽，则可以传递单个槽函数。否则，槽必须以槽函数的对象形式传递。
为了方便，如果子节点不是槽对象，则可以省略属性参数。

示例

创建原生元素

import { h } from 'vue'

// all arguments except the type are optional
h('div')
h('div', { id: 'foo' })

// both attributes and properties can be used in props
// Vue automatically picks the right way to assign it
h('div', { class: 'bar', innerHTML: 'hello' })

// class and style have the same object / array
// value support like in templates
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// event listeners should be passed as onXxx
h('div', { onClick: () => {} })

// children can be a string
h('div', { id: 'foo' }, 'hello')

// props can be omitted when there are no props
h('div', 'hello')
h('div', [h('span', 'hello')])

// children array can contain mixed vnodes and strings
h('div', ['hello', h('span', 'hello')])

创建组件

import Foo from './Foo.vue'

// passing props
h(Foo, {
  // equivalent of some-prop="hello"
  someProp: 'hello',
  // equivalent of @update="() => {}"
  onUpdate: () => {}
})

// passing single default slot
h(Foo, () => 'default slot')

// passing named slots
// notice the `null` is required to avoid
// slots object being treated as props
h(MyComponent, null, {
  default: () => 'default slot',
  foo: () => h('div', 'foo'),
  bar: () => [h('span', 'one'), h('span', 'two')]
})

另请参阅 指南 - 渲染函数 - 创建 VNodes

mergeProps()

以特殊处理某些属性的方式合并多个属性对象。

类型

function mergeProps(...args: object[]): object

详细信息
mergeProps() 支持合并多个属性对象，并特别处理以下属性
- class
- style
- onXxx 事件监听器 - 同名的多个监听器将被合并成一个数组。
如果您不需要合并行为，并希望进行简单的覆盖，可以使用原生的对象展开操作。

示例

import { mergeProps } from 'vue'

const one = {
  class: 'foo',
  onClick: handlerA
}

const two = {
  class: { bar: true },
  onClick: handlerB
}

const merged = mergeProps(one, two)
/**
 {
   class: 'foo bar',
   onClick: [handlerA, handlerB]
 }
 */

cloneVNode()

克隆一个虚拟节点（vnode）。

类型

function cloneVNode(vnode: VNode, extraProps?: object): VNode

详细信息
返回一个克隆的虚拟节点，可以可选地带有额外的属性以与原始节点合并。
一旦创建，虚拟节点应该被视为不可变，您不应该修改现有虚拟节点的属性。相反，您应该使用不同的/额外的属性克隆它。
虚拟节点具有特殊的内部属性，因此克隆它们并不像对象展开那样简单。 cloneVNode() 处理大部分内部逻辑。

示例

import { h, cloneVNode } from 'vue'

const original = h('div')
const cloned = cloneVNode(original, { id: 'foo' })

isVNode()

检查一个值是否是虚拟节点。

类型

function isVNode(value: unknown): boolean

resolveComponent()

用于手动通过名称解析已注册的组件。

类型

function resolveComponent(name: string): Component | string

详细信息
注意：如果您可以直接导入组件，则不需要此功能。
resolveComponent() 必须在 setup() 或渲染函数内部调用，以便从正确的组件上下文中解析。
如果找不到组件，将发出运行时警告，并返回名称字符串。

示例

import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('ButtonCounter')

    return () => {
      return h(ButtonCounter)
    }
  }
}

import { h, resolveComponent } from 'vue'

export default {
  render() {
    const ButtonCounter = resolveComponent('ButtonCounter')
    return h(ButtonCounter)
  }
}

另请参阅 指南 - 渲染函数 - 组件

resolveDirective()

用于手动通过名称解析已注册的指令。

类型

function resolveDirective(name: string): Directive | undefined

详细信息
注意：如果您可以直接导入指令，则不需要此功能。
resolveDirective() 必须在 setup() 或渲染函数内部调用，以便从正确的组件上下文中解析。
如果找不到指令，将发出运行时警告，并返回 undefined。
另请参阅 指南 - 渲染函数 - 自定义指令

withDirectives()

用于向虚拟节点添加自定义指令。

类型

function withDirectives(
  vnode: VNode,
  directives: DirectiveArguments
): VNode

// [Directive, value, argument, modifiers]
type DirectiveArguments = Array<
  | [Directive]
  | [Directive, any]
  | [Directive, any, string]
  | [Directive, any, string, DirectiveModifiers]
>

详细信息
使用自定义指令包装现有的虚拟节点。第二个参数是自定义指令的数组。每个自定义指令也以 [指令, value, argument, modifiers] 形式的数组表示。如果不需要，可以省略数组的尾部元素。

示例

import { h, withDirectives } from 'vue'

// a custom directive
const pin = {
  mounted() {
    /* ... */
  },
  updated() {
    /* ... */
  }
}

// <div v-pin:top.animate="200"></div>
const vnode = withDirectives(h('div'), [
  [pin, 200, 'top', { animate: true }]
])

另请参阅 指南 - 渲染函数 - 自定义指令

withModifiers()

用于向事件处理函数添加内置的 v-on 修饰符。

类型

function withModifiers(fn: Function, modifiers: ModifierGuardsKeys[]): Function

示例

import { h, withModifiers } from 'vue'

const vnode = h('button', {
  // equivalent of v-on:click.stop.prevent
  onClick: withModifiers(() => {
    // ...
  }, ['stop', 'prevent'])
})

另请参阅 指南 - 渲染函数 - 事件修饰符

在GitHub上编辑此页面

渲染函数 API ​

h() ​

mergeProps() ​

cloneVNode() ​

isVNode() ​

resolveComponent() ​

resolveDirective() ​

withDirectives() ​

withModifiers() ​

渲染函数 API

h()

mergeProps()

cloneVNode()

isVNode()

resolveComponent()

resolveDirective()

withDirectives()

withModifiers()