今天,Vue 创始人尤雨溪刚刚正式发布了 Vue 2.x 最后一个版本:Vue 2.7,代号 “Naruto”(火影忍者)。
尽管现在 Vue 3 是默认版本,但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中,从 Vue 3 向后移植了一些最重要的功能,以便 Vue 2 用户也可以从中受益。
博客地址:尤雨溪博客
此外,还支持以下 API:
defineComponent()具有改进的类型推断(与Vue.extend)
h(), , ,useSlot()useAttrs()useCssModules()
set(),并且还作为 ESM 构建中的命名导出提供。del()nextTick()
该选项也受支持,但仅用于类型检查目的(不影响运行时行为)emits
2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时,编译的模板渲染函数将通过为普通JavaScript配置的相同加载器/插件。这意味着,如果您已为文件配置了 Babel,则它也适用于 SFC 模板中的表达式。.js
import Vue, { ref } from 'vue'
Vue.ref // undefined, use named export instead
组合 API 使用 Vue 2 的基于 getter/setter 的反应系统进行反向移植,以确保浏览器兼容性。这意味着与 Vue 3 的基于代理的系统存在一些重要的行为差异:
reactive(), ref()
, 并且shallowReactive()
将直接转换原始对象而不是创建代理。这表示:// true in 2.7, false in 3.x
reactive(foo) === foo
readonly()
确实创建了一个单独的对象,但它不会跟踪新添加的属性并且不适用于数组。reactive()
因为如果没有属性访问,将不会跟踪数组的突变(这将导致警告)。createApp()
(Vue 2 没有独立的应用范围)
(Vue 2 不支持异步组件初始化)
)。2.7 目前处于 beta 阶段,可能仍有粗糙的边缘。请选择加入测试版,帮助我们测试其稳定性。就是这样:
1.将本地依赖项升级@vue/cli-xxx到您的主要版本范围内的最新版本:
~4.5.18
对于 v4~5.0.6
对于 v5vue
到v2-beta
或固定到特定版本(撰写本文时的最新测试版是2.7.0-beta.3
)。您还可以vue-template-compiler
从依赖项中删除 - 在 2.7 中不再需要它。@vue/composition-api
,请将其导入更新为vue
。vue-loader
v15 测试版。由于vue-loader
是 的传递依赖@vue/cli-service
,您需要强制您的包管理器显式使用 beta 版本。当它变得稳定时,将不再需要强制解析。npm
(>=8.3.0) ,使用package.json
.如果使用 Vue CLI v4:
{
"overrides": {
"vue-loader": "^15.10.0-beta.6"
}
}
如果使用 Vue CLI v5:
{
"overrides": {
"@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
}
}
yarn
,请使用 resolutions
中的分辨率字段package.json
。如果使用 Vue CLI v4:
{
"resolutions": {
"vue-loader": "^15.10.0-beta.6"
}
}
如果使用 Vue CLI v5:
{
"resolutions": {
"@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
}
}
pnpm
,使用pnpm.overrides
:如果使用 Vue CLI v4:
{
"pnpm": {
"overrides": {
"vue-loader": "^15.10.0-beta.6"
}
}
}
如果使用 Vue CLI v5:
{
"pnpm": {
"overrides": {
"@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
}
}
}
5.如果您之前使用过任何依赖的库vue-demi
(例如 VueUse
或 Pinia
),您可能需要删除 lockfile
并执行全新的 npm install
以升级到最新版本的vue-demi
.
6.2.7
的 SFC 编译器现在使用 PostCSS 8(从 7 升级)。PostCSS 8 应该向后兼容大多数插件,但如果您以前使用只能与 PostCSS 7 一起使用的自定义 PostCSS 插件,升级可能会导致问题。在这种情况下,您需要将相关插件升级到其 PostCSS 8 兼容版本。
2.7 对 Vite 的支持是通过一个新插件提供的:@vitejs/plugin-vue2
。这个新插件需要 Vue 2.7 或更高版本并取代现有的vite-plugin-vue2
。
请注意,新插件不处理特定于 Vue 的 JSX / TSX
转换,这是有意的。Vue 2 JSX / TSX
转换应在单独的专用插件中处理。
2.7 发布了改进的类型定义,因此不再需要安装@vue/runtime-domVolar
模板类型推断支持。您现在只需要以下配置tsconfig.json
:
{
// ...
"vueCompilerOptions": {
"target": 2.7
}
}
2.7 stable 计划于 2022 年 6 月底左右登陆。如前所述,它将是 Vue 2.x 的最终次要版本。一旦 2.7 稳定发布,Vue 2 将不再接收新功能,并将进入持续 18 个月的 LTS(长期支持)。
这意味着Vue 2 将在 2023 年底结束生命周期。我们认为这应该为大多数生态系统迁移到 Vue 3 提供充足的时间。但是,我们也知道可能有团队或项目无法在此时间线之前升级,但仍需要满足安全性和合规性要求。
1.首先删除node_modules和package-lock.json
2. vue-cli脚手架升级,修改package.json
// package.json
{
"dependencies":{
"vue":"2.7.0"
"devDependencies": {
"@vue/cli-plugin-babel": "^5.0.0",
"@vue/cli-plugin-eslint": "^5.0.6",
"@vue/cli-service": "^5.0.0",
}
}
删除vue-template-compiler
然后重新npm install,这样确保了文件依赖的正确性
3.如果之前使用过 @vue/composition-api
,请将其导入更新为 vue。注意,插件导出的一些 API,例如 createApp,未在 2.7 中移植。
4.如果在使用 时遇到未使用的变量的 lint 错误,请将
eslint-plugin-vue
更新到最新版本 (9+)。
5.Vue 2.7 的 SFC 编译器现在使用 PostCSS8。PostCSS8 应该向后兼容大多数插件,但如果以前使用只能与 PostCSS7 一起使用的自定义 PostCSS 插件,升级可能会导致问题。在这种情况下,需要将相关插件升级到与 PostCSS8 兼容的版本。
但是前面也说了2023以后就不维护了,所以还没有学vue3的同学赶紧学起来吧~