渲染函数 API

breaking

概览

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

以下是更改的简要总结：

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

更多信息，请继续阅读！

Render 函数参数

2.x 语法

在 2.x 中，e render 函数将自动接收 h 函数 (它是 createElement 的常规别名) 作为参数：

  1. // Vue 2 渲染函数示例
  2. export default {
  3.   render(h) {
  4.     return h('div')
  5.   }
  6. }

3.x 语法

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

  1. // Vue 3 渲染函数示例
  2. import { h } from 'vue'
  4. export default {
  5.   render() {
  6.     return h('div')
  7.   }
  8. }

渲染函数签名更改

2.x 语法

在 2.x 中，render 函数自动接收诸如 h 之类的参数。

  1. // Vue 2 渲染函数示例
  2. export default {
  3.   render(h) {
  4.     return h('div')
  5.   }
  6. }

3.x 语法

在 3.x 中，由于 render 函数不再接收任何参数，它将主要用于 setup() 函数内部。这还有一个好处：可以访问作用域中声明的被动状态和函数，以及传递给 setup() 的参数。

  1. import { h, reactive } from 'vue'
  3. export default {
  4.   setup(props, { slots, attrs, emit }) {
  5.     const state = reactive({
  6.       count: 0
  7.     })
  9.     function increment() {
  10.       state.count++
  11.     }
  13.     // 返回render函数
  14.     return () =>
  15.       h(
  16.         'div',
  17.         {
  18.           onClick: increment
  19.         },
  20.         state.count
  21.       )
  22.   }
  23. }

有关 setup() 如何工作的详细信息，见 Composition API Guide。

VNode Props 格式化

2.x 语法

在 2.x 中，domProps 包含 VNode props 中的嵌套列表：

  1. // 2.x
  2. {
  3.   class: ['button', 'is-outlined'],
  4.   style: { color: '#34495E' },
  5.   attrs: { id: 'submit' },
  6.   domProps: { innerHTML: '' },
  7.   on: { click: submitForm },
  8.   key: 'submit-button'
  9. }

3.x 语法

在 3.x 中，整个 VNode props 结构是扁平的，使用上面的例子，下面是它现在的样子

  1. // 3.x 语法
  2. {
  3.   class: ['button', 'is-outlined'],
  4.   style: { color: '#34495E' },
  5.   id: 'submit',
  6.   innerHTML: '',
  7.   onClick: submitForm,
  8.   key: 'submit-button'
  9. }

迁移策略

工具库作者

全局导入 h 意味着任何包含 Vue 组件的库都将在某处包含 import { h } from 'vue'，因此，这会带来一些开销，因为它需要库作者在其构建设置中正确配置 Vue 的外部化：

  • Vue 不应绑定到库中
  • 对于模块构建，导入应该保持独立，由最终用户绑定器处理
  • 对于 UMD/browser 版本，它应该首先尝试全局 Vue.h，然后回退以请求调用

下一步

见 Render 函数指南更详细的文档！