[TOC]
今天,Vue 正式发布了 2.7 版本, 版本名称为 Naturo,即火影忍者。
尽管现在 Vue 3 是默认版本,但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中,从 Vue 3 向后移植了一些最重要的功能,以便 Vue 2 用户也可以从中受益。
向后移植的功能
- Composition API
- SFC
- SFC CSS v-bind
此外,还支持以下 API:
defineComponent()
:具有改进的类型推断(与Vue.extend
相比);h()
、useSlot()
、useAttrs()
、useCssModules()
;set()
、del()
和nextTick()
在 ESM 构建中也作为命名导出提供。
Vue 2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时,编译后的模板渲染函数将通过为普通 JavaScript 配置的相同 loaders / plugins
。这意味着如果为.js
文件配置了 Babel,它也将应用于 SFC 模板中的表达式。
注意事项
- 在 ESM 构建中,这些 API 作为命名导出提供(仅限于命名导出): ```javascript import Vue, { ref } from ‘vue’
Vue.ref // undefined, 改用命名导出
- 在 UMD 和 CJS 构建中,这些 API 作为全局 Vue 对象上的属性暴露。
<a name="ox0s1"></a>
## 与 Vue 3 的行为差异
Composition API 使用 Vue 2 的基于 `getter/setter` 的响应式系统进行反向移植,以确保浏览器兼容性。 这意味着与 Vue 3 的基于 `proxy` 的系统存在一些重要的行为差异:
- 所有 Vue 2 更改检测警告仍然适用;
- `reactive()`、`ref()` 和 `shallowReactive()` 将直接转换原始对象而不是创建代理:
```javascript
// 在2.7中可行,在3.x中不可行
reactive(foo) === foo
readonly()
确实创建了一个单独的对象,但它不会跟踪新添加的属性并且不适用于数组;- 避免在
reactive()
中使用数组作为root
值,因为如果没有属性访问,则不会跟踪数组的变化(这将导致警告); - Reactivity APIs 忽略带有
symbol
键的属性。
此外,以下功能是未移植的:
- ❌
createApp()
(Vue 2 没有独立的应用范围) - ❌
<script setup>
中的顶层 await(Vue 2 不支持异步组件初始化) - ❌ 模板表达式中的 TypeScript 语法(与 Vue 2 解析器不兼容)
- ❌ Reactivity transform(仍处于试验阶段)
❌
options
组件不支持expose
选项(但