阅读 242

从Vue 2到Vue 3的迁移指南之破坏性特性(四、渲染函数API)

1、内容系个人翻译自 Vue 3.0 Beta 版文档中 Migration From Vue 2 章节
2、不一定准确,欢迎交流(别人都翻过几百遍了吧,再说也没人看)
3、水平有限、随时太监

· 从Vue 2到Vue 3的迁移指南之破坏性特性(一、全局API)
· 从Vue 2到Vue 3的迁移指南之破坏性特性(二、全局API的tree-shaking)
· 从Vue 2到Vue 3的迁移指南之破坏性特性(三、v-model)

渲染函数 API

概览

这个修改不会影响到使用 <template> 的用户。

以下是修改内容的快速总结:

  • h 参数现在需要全局导入,而不是通过参数传递到渲染函数内
  • 有状态的组件与函数式组件之间的渲染函数参数变得更加一致
  • VNode 现在具有一个扁平化的参数结构

获取更多信息,请继续阅读!

渲染函数的参数

2.x 语法

在 2.x 中,render 函数将自动接收一个 h 函数(createElement 的常用别名)作为参数:

// Vue 2 渲染函数样例
export default {
  render(h) {
    return h('div')
  }
}
复制代码

3.x 语法

在 3.x 中,h 现在需要全局导入,而不是自动传参

// Vue 3 渲染函数样例
import { h } from 'vue'

export default {
  render() {
    return h('div')
  }
}
复制代码

渲染函数签名变化

2.x 语法

2.x 中,render 函数会自动接收如 h 之类的参数。

// Vue 2 渲染函数样例
export default {
  render(h) {
    return h('div')
  }
}
复制代码

3.x 语法

3.x 中,render 函数不需要再接收任何参数了,并且主要用于 setup() 函数内,这对于作用域内定义的响应式状态、函数以及传入 setup() 中的参数的访问有些额外的作用。

import { h, reactive } from 'vue'

export default {
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      count: 0
    })

    function increment() {
      state.count++
    }

    // 返回渲染函数
    return () =>
      h(
        'div',
        {
          onClick: increment
        },
        state.count
      )
  }
}
复制代码

了解更多 setup() 的运行机制,请参阅 Composition API 指南

VNode 参数格式

2.x 语法

2.x 中,domProps 包含了由 VNode 属性构成的嵌套列表:

// 2.x
{
  class: ['button', 'is-outlined'],
  style: { color: '#34495E' },
  attrs: { id: 'submit' },
  domProps: { innerHTML: '' },
  on: { click: submitForm },
  key: 'submit-button'
}
复制代码

3.x 语法

3.x 中,整体的 VNode 属性结构进行了扁平化处理,上方例子的内容现在变成这样:

// 3.x 语法
{
  class: ['button', 'is-outlined'],
  style: { color: '#34495E' },
  id: 'submit',
  innerHTML: '',
  onClick: submitForm,
  key: 'submit-button'
}
复制代码

迁移策略

对于库作者

h 要全局导入意味着包含了Vue组件的库需要在某些地方使用 import { h } from 'vue',而从结果上看这确实会造成一些开销,因为库的作者需要在他们的构建设置里恰当地设置好一些 Vue 项目的外部配置:

  • Vue 不应被打包进库里面
  • 对于为 ES Module 构建版本,导入的东西需要独立出来以供最终用户去处理
  • 对于为 UMD / 浏览器 构建的版本,应先尝试使用 Vue.h,不行则请求调用

后续

请参阅 渲染函数指南 获取更多详细文档。