渲染函数 API

    此更改不会影响 用户。

    以下是更改的简要总结：

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

    更多信息，请继续阅读！

    Render 函数参数

    3.x 语法

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

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

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

    3.x 语法

    在 3.x 中，由于 render 函数不再接收任何参数，它将主要用于 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.         {
    18.         },
    19.         state.count
    20.       )
    21.   }
    22. }

    VNode Props 格式化

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

    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 组件的库都将在某处包含 ，因此，这会带来一些开销，因为它需要库作者在其构建设置中正确配置 Vue 的外部化：

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

    下一步