代号为Naruto的Vue 2.7正式发布功能详解

目录

• 引言
• 向后移植的功能
• 注意事项
• 与 Vue 3 的行为差异
• 升级指南
• Vue CLI / webpack
• Vite
• Volar 兼容性
• Devtools 支持
• 2.7 版本的影响
• 额外细节

引言

Vue 正式发布了 2.7 版本， 版本名称为 Naruto，即火影忍者。

尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。

向后移植的功能

此外，还支持以下 API：

• defineComponent()：具有改进的类型推断（与Vue.extend相比）；
• h()、useSlot()、useAttrs()、useCssModules()；
• set()、del() 和 nextTick() 在 ESM 构建中也作为命名导出提供。

Vue 2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时，编译后的模板渲染函数将通过为普通 JavaScript 配置的相同 loaders / plugins。这意味着如果为.js文件配置了 Babel，它也将应用于 SFC 模板中的表达式。

注意事项

• 在 ESM 构建中，这些 API 作为命名导出提供（仅限于命名导出）：

import Vue, { ref } from 'vue'
Vue.ref // undefined, 改用命名导出

• 在 UMD 和 CJS 构建中，这些 API 作为全局 Vue 对象上的属性暴露。

与 Vue 3 的行为差异

Composition API 使用 Vue 2 的基于 getter/setter 的响应式系统进行反向移植，以确保浏览器兼容性。 这意味着与 Vue 3 的基于 proxy 的系统存在一些重要的行为差异：

• 所有 Vue 2 更改检测警告仍然适用；
• reactive()、ref() 和 shallowReactive() 将直接转换原始对象而不是创建代理：

// 在2.7中可行，在3.x中不可行
reactive(foo) === foo

• readonly() 确实创建了一个单独的对象，但它不会跟踪新添加的属性并且不适用于数组；
• 避免在 reactive() 中使用数组作为 root 值，因为如果没有属性访问，则不会跟踪数组的变化（这将导致警告）；
• Reactivity APIs 忽略带有 symbol 键的属性。

此外，以下功能是未移植的：

• ❌ createApp()（Vue 2 没有独立的应用范围）
• ❌