Naruto 2.7正式发布，有哪些具体功能更新和优化？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1887个文字，预计阅读时间需要8分钟。
目录+引言+向后移植的功能+注意事项+与Vue 3的行为差异+升级指南+Vue CLI+webpack+Vite+Volar+兼容性+Devtools+支持2.7版本的影响+额外细节+引言+Vue 2.7正式发布了
目录
- 引言
- 向后移植的功能
- 注意事项
- 与 Vue 3 的行为差异
- 升级指南
- Vue CLI / webpack
- Vite
- Volar 兼容性
- Devtools 支持
- 2.7 版本的影响
- 额外细节
引言
Vue 正式发布了 2.7 版本， 版本名称为 Naruto，即火影忍者。
尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。
向后移植的功能
此外，还支持以下 API：
defineComponent()：具有改进的类型推断（与Vue.extend相比）；h()、useSlot()、useAttrs()、useCssModules()；set()、del()和nextTick()在 ESM 构建中也作为命名导出提供。
Vue 2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时，编译后的模板渲染函数将通过为普通 JavaScript 配置的相同 loaders / plugins。这意味着如果为.js文件配置了 Babel，它也将应用于 SFC 模板中的表达式。
注意事项
- 在 ESM 构建中，这些 API 作为命名导出提供（仅限于命名导出）：
import Vue, { ref } from 'vue' Vue.ref // undefined, 改用命名导出
- 在 UMD 和 CJS 构建中，这些 API 作为全局 Vue 对象上的属性暴露。
与 Vue 3 的行为差异
Composition API 使用 Vue 2 的基于 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 没有独立的应用范围） - ❌
<script setup>中的顶层 await（Vue 2 不支持异步组件初始化） - ❌ 模板表达式中的 TypeScript 语法（与 Vue 2 解析器不兼容）
- ❌ 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 中被取消。
（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
Vue2.7 对 Vite 的支持是通过一个新插件提供的：@vitejs/plugin-vue2。这个新插件需要 Vue 2.7 或更高版本并取代现有的 vite-plugin-vue2。
注意，新插件不处理特定于 Vue 的 JSX / TSX transform，这是有意的。 Vue 2 JSX / 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 的稳定性。
翻译原文blog.vuejs.org/posts/vue-2-7-naruto.html
以上就是代号为Naruto的Vue 2.7正式发布功能详解的详细内容，更多关于Vue2.7 Naruto功能的资料请关注易盾网络其它相关文章！
本文共计1887个文字，预计阅读时间需要8分钟。
目录+引言+向后移植的功能+注意事项+与Vue 3的行为差异+升级指南+Vue CLI+webpack+Vite+Volar+兼容性+Devtools+支持2.7版本的影响+额外细节+引言+Vue 2.7正式发布了
目录
- 引言
- 向后移植的功能
- 注意事项
- 与 Vue 3 的行为差异
- 升级指南
- Vue CLI / webpack
- Vite
- Volar 兼容性
- Devtools 支持
- 2.7 版本的影响
- 额外细节
引言
Vue 正式发布了 2.7 版本， 版本名称为 Naruto，即火影忍者。
尽管现在 Vue 3 是默认版本，但由于仍有许多用户由于依赖兼容性、浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2。在 Vue 2.7 中，从 Vue 3 向后移植了一些最重要的功能，以便 Vue 2 用户也可以从中受益。
向后移植的功能
此外，还支持以下 API：
defineComponent()：具有改进的类型推断（与Vue.extend相比）；h()、useSlot()、useAttrs()、useCssModules()；set()、del()和nextTick()在 ESM 构建中也作为命名导出提供。
Vue 2.7 还支持在模板表达式中使用 ESNext 语法。使用构建系统时，编译后的模板渲染函数将通过为普通 JavaScript 配置的相同 loaders / plugins。这意味着如果为.js文件配置了 Babel，它也将应用于 SFC 模板中的表达式。
注意事项
- 在 ESM 构建中，这些 API 作为命名导出提供（仅限于命名导出）：
import Vue, { ref } from 'vue' Vue.ref // undefined, 改用命名导出
- 在 UMD 和 CJS 构建中，这些 API 作为全局 Vue 对象上的属性暴露。
与 Vue 3 的行为差异
Composition API 使用 Vue 2 的基于 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 没有独立的应用范围） - ❌
<script setup>中的顶层 await（Vue 2 不支持异步组件初始化） - ❌ 模板表达式中的 TypeScript 语法（与 Vue 2 解析器不兼容）
- ❌ 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 中被取消。
（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
Vue2.7 对 Vite 的支持是通过一个新插件提供的：@vitejs/plugin-vue2。这个新插件需要 Vue 2.7 或更高版本并取代现有的 vite-plugin-vue2。
注意，新插件不处理特定于 Vue 的 JSX / TSX transform，这是有意的。 Vue 2 JSX / 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 的稳定性。
翻译原文blog.vuejs.org/posts/vue-2-7-naruto.html
以上就是代号为Naruto的Vue 2.7正式发布功能详解的详细内容，更多关于Vue2.7 Naruto功能的资料请关注易盾网络其它相关文章！