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，不行则请求调用

后续

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