就是这篇文章发布的2小时前,vue2.7版本也是官宣的2.x最后一个版本正式发布了!(官方链接)
2.7新增了几乎所有vue3.0的特性,但是又不像vue3.0那样硬性更改/删除了很多特性,导致很多开发者升级到vue3.0一堆报错,万不得已又降回到2.x版本中。而2.7正式为了解决此问题而出的过渡版本,既增加了很多新特性,有保留了所有2.x的特性,小伙伴们可以慢慢一点点迭代升级,等项目全部更新成改造新的api之后,再直接换成3.0就不会一堆报错,可以做到无痛升级了!
此外,根据官宣:Vue 2 将在 2023 年底彻底结束生命周期。 各位学不动的童鞋们,要抓紧时间了!
话不多说,我们直接开始看看2.7版本的新特性吧!
如果这篇文章能给您带来一点点的帮助的话,麻烦移动下鼠标点个❤️赞❤️吧!您的点赞会给笔者带来更新的持续动力!
一、向下兼容的特性
- 组合式 API(核心特性)
- SFC(单文件组件)
<script setup>
- SFC(单文件组件) CSS v-bind
此外,还支持以下 API:
defineComponent()
具有更好类型推断的vue扩展(对标Vue.extend
)h()
,useSlot()
,useAttrs()
,useCssModules()
set()
,del()
并且nextTick()
在ESM中也可以导出了- 支持该
emits
选项
2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时,编译后的模板渲染函数将和普通 JavaScript一样,配置的相同加载器/插件。这意味着如果您为.js
文件配置了 Babel,它也将应用于您的 SFC 模板中的表达式。(再也不用担心template内不可以写新语法啦)
关于API暴露的注意事项
- 在 ESM 构建中,这些API讲只作为name导出提供:
import Vue, { ref } from 'vue'
Vue.ref // undefined, use named export instead
与 Vue 3 的行为差异
组合式 API 使用 Vue 2 的基于 getter/setter 的反应系统进行反向移植,以确保浏览器兼容性。这意味着与 Vue 3 的基于代理的系统存在一些重要的行为差异:
-
所有Vue 2 变更检测警告仍然适用。
-
reactive()
,ref()
, 并且shallowReactive()
将直接转换原始对象而不是创建代理。这表示:// true in 2.7, false in 3.x reactive(foo) === foo
-
readonly()
确实创建了一个单独的对象,但它不会跟踪新添加的属性并且不适用于数组。 -
避免使用数组作为根值,
reactive()
因为如果没有属性访问,将不会跟踪数组的变化(这将导致警告)。
此外,以下功能明确未移植:
- ❌
createApp()
(Vue 2 没有独立的应用范围) - ❌ 顶层
await
in<script setup>
(Vue 2 不支持异步组件初始化) - ❌ 模板表达式中的 TypeScript 语法(与 Vue 2 解析器不兼容)
- ❌ Reactivity转换(仍处于试验阶段)
- ❌
expose
选项不支持在options components
中使用(但defineExpose()
在<script setup>
中可以支持)。
升级指南
Vue CLI / webpack
-
将本地依赖项升级
@vue/cli-xxx
到主要版本范围内的最新版本(如果适用):- 对于 v4升级到
~4.5.18
- 对于 v5升级到
~5.0.6
- 对于 v4升级到
-
升级
vue
到^2.7.0
. 您还可以把vue-template-compiler
从依赖项中删除。因为在 2.7 中已经不再需要它。注意:如果您正在使用
@vue/test-utils
,您可能需要暂时将其保留在依赖项中。 -
如果您以前使用过
@vue/composition-api
,请将其导入更新为vue
。
关于Devtools的支持度
Vue Devtools 6.2.0 增加了对检查 2.7 组合 API 状态的支持,但扩展可能仍需要几天时间才能在各自的发布平台上通过审核。
2.7 版本的影响
如前所述,2.7 是 Vue 2.x 的最终次要版本。在这个版本之后,Vue 2 进入了 LTS(长期支持),从现在开始持续 18 个月,并且将不再接收新功能。
这意味着Vue 2 将在 2023 年底结束生命周期。我们认为这应该为大多数生态系统迁移到 Vue 3 提供了充足的时间。但是,我们也知道可能有团队或项目无法在此时间线之前升级,但仍需要满足安全性和合规性要求。我们计划为有此类需求的团队提供对 Vue 2 的扩展支持——如果您的团队希望在 2023 年底之后使用 Vue 2,请务必在此处计划并注册您的兴趣。
如果这几个特性能给您带来一点点的帮助的话,麻烦移动下鼠标点个❤️赞❤️吧!您的点赞会给笔者带来更新的持续动力!