代号为Naruto的Vue 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 没有独立的应用范围)

你可能感兴趣的:(代号为Naruto的Vue 2.7正式发布功能详解)