Vue v3.1.0 Pluto 发布

随着 Vue 3 生态的逐步稳定，Vue 3 的迁移版本也提上了日程。

就在今天早些时候，Vue 官方团队正式发布了 v3.1.0 版本。

后续版本都会致力于让你更轻松地从 Vue 2 迁移至 Vue 3。

为此，官方团队做了很多努力。

文档更新

官方团队针对迁移文档进行了进一步的完善 PR 1033

其中尤大在 Vue Conf China 2021 上提到的 Vue Compat 仓库的文档，也一并合并到了官方文档中，其连接为 迁移构建。

破坏性更改

本次更新中存在两个小的破坏性更改，

1. props 中声明的 key，将一直存在。不管父组件是否传递该 key。

源码中的核心代码如下：

// ensure all declared prop keys are present
for (const key in instance.propsOptions[0]) {
  if (!(key in props)) {
    props[key] = undefined // 如果 key 不存在 props 中，将默认在 props 中进行声明
  }
}

这会导致一些行为的变化，比如(issues 中的案例)：

因为字段一直存在，所以在使用 hasOwnProperty 时，就会出现异常情况。

Old:

const propsToAdd = {
  'value': props.hasOwnProperty('modelValue') ? props.modelValue : props.value
}

New:

const propsToAdd = {
  'value': props.hasOwnProperty('modelValue') && props.modelValue !== undefined ? props.modelValue : props.value
}

官方文档给出了相应解释：

如果你遇到了这方面的问题，可以按照如下方式修改：

const isAbsent = Symbol()

export default {
  props: {
    foo: { default: isAbsent }
  },
  setup(props) {
    if (props.foo === isAbsent) {
      // foo is absent
    }
  }
}

相关链接：

• issue 3288
• issue 3889
• commit
• 文档更新

2. optionsMergeStrategies 不再接收组件实例作为第三个参数

这个对大家影响不大，主要用于生成警告。

弃用

• app.config.isCustomElement 已被废弃，应使用 app.config.compilerOptions 下的 isCustomElement 选项。文档
• delimiters 组件选项已被废弃，请使用 compilerOptions 下的 delimiters 选项。文档
• v-is 已弃用，请使用 is="vue:xxx" 代替。文档

总结

其他更新，可以参阅我们编写的 Vue 3.1.0 beta 版本发布。

最后附上尤大在 Vue Conf 上的演讲，可以帮助大家更进一步的理解。