大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北
籍前端群,可加我微信进群。
今天,Vue 正式发布了 2.7 版本, 版本名称为 Naruto,即火影忍者。
尽管现在 Vue 3 是默认版本,但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中,从 Vue 3 向后移植了一些最重要的功能,以便 Vue 2 用户也可以从中受益。
向后移植的功能
- Composition API
- SFC
- SFC CSS v-bind
defineComponent()
:具有改进的类型推断(与Vue.extend
相比);
h()
、useSlot()
、useAttrs()
、useCssModules()
;
set()
、del()
和nextTick()
在 ESM 构建中也作为命名导出提供。
loaders / plugins
。这意味着如果为.js
文件配置了 Babel,它也将应用于 SFC 模板中的表达式。注意事项
- 在 ESM 构建中,这些 API 作为命名导出提供(仅限于命名导出):
import Vue, { ref } from 'vue'Vue.ref // undefined, 改用命名导出
- 在 UMD 和 CJS 构建中,这些 API 作为全局 Vue 对象上的属性暴露。
getter/setter
的响应式系统进行反向移植,以确保浏览器兼容性。这意味着与 Vue 3 的基于 proxy
的系统存在一些重要的行为差异:- 所有 Vue 2 更改检测警告仍然适用;
reactive()
、ref()
和shallowReactive()
将直接转换原始对象而不是创建代理:
// 在2.7中可行,在3.x中不可行
reactive(foo) === foo
readonly()
确实创建了一个单独的对象,但它不会跟踪新添加的属性并且不适用于数组;
- 避免在
reactive()
中使用数组作为root
值,因为如果没有属性访问,则不会跟踪数组的变化(这将导致警告);
- Reactivity APIs 忽略带有
symbol
键的属性。
- ?
createApp()
(Vue 2 没有独立的应用范围)
- ?
中的顶层 await(Vue 2 不支持异步组件初始化)
- ? 模板表达式中的 TypeScript 语法(与 Vue 2 解析器不兼容)
- ? Reactivity transform(仍处于试验阶段)
- ?
options
组件不支持expose
选项(但支持
defineExpose()
)。
(1)将本地
@vue/cli-xxx
依赖项升级到主要版本范围内的最新版本(如果适用):- 对于 v4:~4.5.18
- 对于 v5:~5.0.6
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)如果在使用
时遇到未使用的变量的 lint
错误,请将 eslint-plugin-vue
更新到最新版本 (9+)。(6)Vue 2.7 的 SFC 编译器现在使用 PostCSS 8。PostCSS 8 应该向后兼容大多数插件,但如果以前使用只能与 PostCSS 7 一起使用的自定义 PostCSS 插件,升级可能会导致问题。在这种情况下,需要将相关插件升级到与 PostCSS 8 兼容的版本。
Vite
Vue2.7 对 Vite 的支持是通过一个新插件提供的:@vitejs/plugin-vue2。这个新插件需要 Vue 2.7 或更高版本并取代现有的 vite-plugin-vue2。
【java|Vue 2.7 正式发布,代号为 Naruto】注意,新插件不处理特定于 Vue 的 JSX / TSX
transform
,这是有意的。Vue 2JSX / TSXtransform
应该在一个单独的专用插件中处理,该插件将很快提供。Volar 兼容性
Vue 2.7 提供了改进的类型定义,因此不再需要安装
@vue/runtime-dom
来支持 Volar 模板类型推断。现在只需要在 tsconfig.json
中进行以下配置:{
// ...
"vueCompilerOptions": {
"target": 2.7
}
}
Devtools 支持
Vue Devtools 6.2.0 增加了对检查 2.7 Composition API 状态的支持,但扩展可能仍需要几天时间在各个发布平台上通过审核。
2.7 版本的影响Vue 2.7 是 Vue 2.x 的最终次要版本。在这个版本之后,Vue 2 进入了 LTS(长期支持),从现在开始持续 18 个月,并且将不再接收新功能。这意味着 Vue 2 将在 2023 年底结束其生命周期。这应该为大多数生态系统迁移到 Vue 3 提供充足的时间。
额外细节在准备此版本时,Vue 团队将 Vue 2 代码库从 Flow 移植到了 TypeScript,这是基于核心团队成员
@pikax
的努力。这样更容易重用 Vue 3 中的代码,并为移植的 API 自动生成类型定义。除此之外,还将单元测试从 Karma + Jasmine 移至 Vitest,从而大大提高了维护 DX 和 CI 的稳定性。原文:https://blog.vuejs.org/posts/vue-2-7-naruto.html
文章图片
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经坚持写了8年,点击查看年度总结。
同时,最近组织了源码共读活动,帮助4000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。
文章图片
扫码加我微信 ruochuan12、拉你进源码共读群
今日话题
目前建有江西|湖南|湖北 籍 前端群,想进群的可以加我微信 ruochuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持
推荐阅读
- Python 项目管理与构建工具(CookieCutter, PyScaffold, PyBuilder, Poetry)
- Python 微服务框架 Nameko 初体验
- python|Linux系统Python虚拟环境管理软件pyenv
- java|java 异步缓存_为什么redis在java是同步缓存,而在nodejs是异步缓存()
- JavaSE|【Java小游戏】俄罗斯方块
- 数据结构|【数据结构】优先级队列 - 堆
- JavaSE|【JavaSE】数组
- Whoosh(Python 的轻量级搜索工具)
- 即时通讯源码对企业到底有多重要呢()