渲染函数 API

重大变更

概述

此变更不会影响 <template> 用户。

以下是变更的简要概述

• h 现在是全局导入的，而不是作为参数传递给渲染函数
• 渲染函数参数已更改，以在有状态组件和函数式组件之间更加一致
• VNode 现在具有扁平的 props 结构

有关更多信息，请继续阅读！

渲染函数参数

2.x 语法

在 2.x 中，render 函数会自动接收 h 函数（它是 createElement 的传统别名）作为参数

// Vue 2 Render Function Example
export default {
  render(h) {
    return h('div')
  }
}

3.x 语法

在 3.x 中，h 现在是全局导入的，而不是自动作为参数传递。

// Vue 3 Render Function Example
import { h } from 'vue'

export default {
  render() {
    return h('div')
  }
}

VNode Props 格式

2.x 语法

在 2.x 中，domProps 在 VNode props 中包含一个嵌套列表

// 2.x
{
  staticClass: 'button',
  class: {'is-outlined': isOutlined },
  staticStyle: { color: '#34495E' },
  style: { backgroundColor: buttonColor },
  attrs: { id: 'submit' },
  domProps: { innerHTML: '' },
  on: { click: submitForm },
  key: 'submit-button'
}

3.x 语法

在 3.x 中，整个 VNode props 结构已扁平化。使用上面的示例，以下是现在的外观。

// 3.x Syntax
{
  class: ['button', { 'is-outlined': isOutlined }],
  style: [{ color: '#34495E' }, { backgroundColor: buttonColor }],
  id: 'submit',
  innerHTML: '',
  onClick: submitForm,
  key: 'submit-button'
}

已注册的组件

2.x 语法

在 2.x 中，当组件已注册时，将组件的名称作为字符串传递给第一个参数，渲染函数将正常工作

// 2.x
Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  }
  template: `
    <button @click="count++">
      Clicked {{ count }} times.
    </button>
  `
})

export default {
  render(h) {
    return h('button-counter')
  }
}

3.x 语法

在 3.x 中，由于 VNode 是无上下文，我们不能再使用字符串 ID 来隐式查找已注册的组件。相反，我们需要使用导入的 resolveComponent 方法

// 3.x
import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('button-counter')
    return () => h(ButtonCounter)
  }
}

有关更多信息，请参阅 渲染函数 API 变更 RFC。

迁移策略

迁移构建标志：RENDER_FUNCTION

库作者

h 是全局导入的，这意味着任何包含 Vue 组件的库都将在某个地方包含 import { h } from 'vue'。结果，这会产生一些开销，因为这需要库作者在他们的构建设置中正确配置 Vue 的外部化

• Vue 不应捆绑到库中
• 对于模块构建，导入应保留并由最终用户捆绑器处理
• 对于 UMD/浏览器构建，它应该首先尝试全局 Vue.h，然后回退到 require 调用

下一步

有关更详细的文档，请参阅 渲染函数指南！