Vue2.7正式发布,终于可以在Vue2项目中使用Vue3的特性了,真香~
目录
前言
尽管现在 Vue3 是默认版本,但还有许多用户、相关库、周边生态使用的是 Vue2,且由于依赖兼容性、浏览器支持要求或没有足够的带宽升级,导致不得不继续使用 Vue2。难道 Vue3 发布了这么多“真香”的特性,我们 Vue2 的用户与项目就只能眼巴巴地看着?当然不是!有一个好消息是,前两天 Vue2.7 正式发布了。在此版本中,从 Vue3 向后移植了一些最重要的功能,以便 Vue2 用户也可以从中受益。
正文
一、向后移植的功能
在 Vue2.7 中,Vue3 的很多功能将会向后移植,以便于 Vue2 的很多项目可以使用 Vue3 的一些很好用的新特性,例如:
-
Composition API (组合式 API)
-
SFC <script setup> (单文件组件 <script setup>)
-
SFC CSS v-bind (单文件组件 CSS 中的 v-bind)
此外,还支持以下 API:
-
defineComponent()
:具有改进的类型推断(与Vue.extend
相比); -
h()
、useSlot()
、useAttrs()
、useCssModules()
; -
set()
、del()
和nextTick()
在 ESM 构建中也作为命名导出提供; -
支持
emits
,但仅用作类型检查用途(不影响运行时行为)。
Vue2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时,编译后的模板渲染函数将通过为普通 JavaScript 配置的相同 loaders / plugins
。这意味着如果为.js
文件配置了 Babel,它也将应用于 SFC 模板中的表达式。
现在你终于可以在模版里面用可选链 formData?.userInfo?.userId
,而不用写一长串 &&
,也可以直接使用零合并操作符 ??
来给变量赋一个默认值了,而不需要用可能导致 bug 的或 ||
。
注意:在 ESM 构建中,这些 API 作为命名导出提供(仅限于命名导出)
import { ref, reactive } from 'vue'
而在 UMD 和 CJS 构建中,这些 API 作为全局 Vue 对象上的属性暴露。
二、与 Vue3 的差异
Composition API 使用 Vue2 的基于 getter/setter
的响应式系统进行反向移植,以确保浏览器兼容性。这意味着与 Vue3 的基于 proxy
的系统存在一些重要的行为差异:
-
所有 Vue2 更改检测警告仍然适用;
-
reactive()
、ref()
和shallowReactive()
将直接转换原始对象而不是创建代理:
// 在2.7中可行,在3.x中不可行
reactive(foo) === foo
-
readonly()
确实创建了一个单独的对象,但它不会跟踪新添加的属性并且不适用于数组; -
避免在
reactive()
中使用数组作为root
值,因为如果没有属性访问,则不会跟踪数组的变化(这将导致警告); -
Reactivity APIs 忽略带有
symbol
键的属性。
此外,以下功能是未移植的:
-
❌
createApp()
(Vue2 没有独立的应用范围) -
❌
<script setup>
中的顶层 await(Vue2 不支持异步组件初始化) -
❌ 模板表达式中的 TypeScript 语法(与 Vue2 解析器不兼容)
-
❌ Reactivity transform(仍处于试验阶段)
-
❌
options
组件不支持expose
选项(但<script setup>
支持defineExpose()
)。
三、项目升级
使用脚手架 Vue Cli 或者构建工具 Webpack 搭建的项目,需注意一下几点:
(1)将本地 @vue/cli-xxx
依赖项升级到主要版本范围内的最新版本(如果适用)
-
对于 v4:~4.5.18
-
对于 v5:~5.0.6
(2)将 Vue 升级到 ^2.7.0。还可以从依赖项中删除 vue-template-compiler
,因为在 2.7 中不再需要它。注意:如果正在使用 @vue/test-utils
,可能需要暂时将它保留在依赖项中,但是这个要求也将在新版本的 Test Utils 中被取消。
原 ^2.6.14 项目
编辑 package.json,升级为 ^2.7.0,删除 vue-template-compiler
(3)检查包管理器 lock
文件以确保以下依赖项满足版本要求。它们可能是 package.json
中未列出的传递依赖项:
-
vue-loader: ^15.10.0
-
vue-demi: ^0.13.1
如果没有,需要删除 node_modules
和 lock
文件并重新安装,以确保它们升级到最新版本。
(4)如果之前使用过 @vue/composition-api
,请将其导入更新为 vue。注意,插件导出的一些 API,例如 createApp
,未在 2.7 中移植。
(5)如果在使用 <script setup>
时遇到未使用的变量的 lint
错误,请将 eslint-plugin-vue
更新到最新版本 (9+)。
(6)Vue 2.7 的 SFC 编译器现在使用 PostCSS8。PostCSS8 应该向后兼容大多数插件,但如果以前使用只能与 PostCSS7 一起使用的自定义 PostCSS 插件,升级可能会导致问题。在这种情况下,需要将相关插件升级到与 PostCSS8 兼容的版本。
尝试在项目使用 Vue3 特性
<template>
<div>
<h1 :style="styleObj">{{ msg }}</h1>
<button @click="changeColor">切换颜色</button>
</div>
</template>
<script setup>
import { toRefs, reactive } from 'vue'
let props = defineProps({
msg: String
})
let { msg } = toRefs(props)
console.log(msg,'msg')
let styleObj = reactive({
color:'blue'
})
console.log(styleObj,'styleObj')
let changeColor = function(){
if(styleObj.color === 'blue'){
styleObj.color = 'red'
} else {
styleObj.color = 'blue'
}
}
</script>
控制台无报错,页面效果
控制台打印响应性变量
四、后续支持
Vue2.7 是 Vue2.x 的最终次要版本。在这个版本之后,Vue2 进入了 LTS(长期支持),从现在开始持续 18 个月,并且将不再接收新功能。这意味着 Vue2 将在 2023 年底结束其生命周期。这应该为大多数生态系统迁移到 Vue3 提供充足的时间。
总结
Vue2.7 的正式发布,预示着你在自己的 Vue2 项目中可以使用部分 Vue3 的特性了,赶紧试试吧!
相关文章
- 如何在Vue3+js项目(脚手架)中使用(下载安装及运行)element-plus以及解决使用过程中遇到的问题
- [转]tsx开发vue3:从零到全面覆盖
- vue3 请求登录接口+请求拦截器
- Vue3学习之深度剖析CSS Modules和Scope
- vue-infinite-scroll支持vue3
- 下班前几分钟,我用几行代码搭建了个 Vue3 项目
- Vue3前端项目加载使用腾讯地图
- VUE3实用组件开发合集一:数字滚动组件
- 使用vite构建vue3项目与官网构建区别
- Vue3之provide与inject
- Vue3之搭建项目
- vite+vue3+ts项目之新建项目
- vue cli创建vue3项目
- Vue3 computed 赋值
- vue3 项目引入 css 变量处理
- 31 vue3 Pinia监听订阅actions
- 24 vue3使用vuex--- actions的使用
- 15.0 vue3 provide&inject跨组件通信方式
- 3.0 vue3有关组件传值