Vue 2.7 “Naruto”发布,新特性介绍
2.7 是 Vue 2.x 的最终版本。在这个版本之后,Vue 2 进入了 LTS(长期支持),从现在开始持续 18 个月,并且将不再接收新功能。这意味着Vue 2 将在 2023 年底结束生命周期。
官方博客:https://blog.vuejs.org/posts/vue-2-7-naruto.html?continueFlag=24b18743108fc3e584f79dec07a79f02
更新内容
1.向后兼容的功能
- 支持composition API
- 支持script setup
- 支持css v-bind
提示
在 UMD 和 CJS 构建中,这些 API 作为全局Vue对象的属性公开。
2.相较于Vue3
组合 API 使用 Vue 2 的基于 getter/setter 的反应系统进行反向移植,以确保浏览器兼容性。
- reactive(), ref(), shallowReactive()将直接转换原始对象而不是创建代理。
- reactive(),应避免使用数据做为根节点(无法追踪响应)
- 不支持createApp、不支持suspense;
Vue-cli适配
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 中被取消。
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 编译器现在使用 PostCSS 8。 PostCSS 8 应该向后兼容大多数插件,但如果以前使用只能与 PostCSS 7 一起使用的自定义 PostCSS 插件,升级可能会导致问题。在这种情况下,需要将相关插件升级到与 PostCSS 8 兼容的版本。
Vite适配
2.7 对 Vite 的支持是通过一个新插件提供的:@vitejs/plugin-vue2。这个新插件需要 Vue 2.7 或更高版本并取代现有的vite-plugin-vue2。
旧版本仓库:https://github.com/underfin/vite-plugin-vue2
新版本仓库:https://github.com/vitejs/vite-plugin-vue2
参考
全家桶
Vue-router、Vuex官方还没有提供相应的Vue2.7版本,但是社区已经有在讨论了。https://github.com/vuejs/vue-router/issues/3760
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的