Vue2.7尝鲜,代号“ Naruto”

21,352 阅读7分钟
「时光不负,创作不停,本文正在参加2022年中总结征文大赛

2022年7月1号,Vue正式发布了2.7版本 【官方连接】。同时,也宣告了Vue 2 将在 2023 年底彻底结束生命周期,此举也是为了照顾部分Vue2用户因为无法升级版本,但又想体验Vue3新特性的的情况,例如组合式API

在介绍2.7版本之前,我们先来回顾一下Vue历代版本的代号,请看大图:

image.png

可以看出来尤大是个老二次元了,以上动漫你们看过哪几部呢?

版本号发布日期相关图片官方备注相关链接
Vue0.9 Animatrix 黑客帝国2014-02-25"...then man made the machine in his own likeness. Thus did man become the architect of his own demise." - The Instructor黑客帝国动画版 movie.douban.com/subject/129…
Vue0.10 Blade Runner 银翼杀手2014-03-24"A coding sequence cannot be revised once it's been established." -Tyrell银翼杀手 movie.douban.com/subject/129…
Vue0.11 Cowboy Bebop 星际牛仔2014-11-07"There are ends we don't desire, but they're inevitable, we have to face them. It's what being human is all about." - Jet Black星际牛仔 movie.douban.com/subject/142…
Vue0.12 Dragon Ball 龙珠2015-06-13"If you keep calm you'll never be a super saiyan." - Goku龙珠 movie.douban.com/subject/247…
Vue1.0 Evangelion 新福音战士2015-10-27"The fate of destruction is also the joy of rebirth." - SEELE新福音战士 movie.douban.com/subject/104…
Vue2.0 Ghost in the Shell 攻壳机动队2016-10-01"Your effort to remain what you are is what limits you." - Puppet Master攻壳机动队movie.douban.com/subject/258…
Vue2.1 Hunter X Hunter 全职猎人2016-11-23"You should enjoy the little detours to the fullest. Because that's where you'll find the things more important than what you want." - Ging Freecss全职猎人 movie.douban.com/subject/146…
Vue2.2 Initial D 头文字D2017-02-26Fill'er up. High Octane.movie.douban.com/subject/186…
Vue2.3 JoJo's Bizarre Adventure JOJO的奇妙冒险2017-04-27It was me, Dio!JOJO的奇妙冒险 movie.douban.com/subject/114…
Vue2.4 Kill la Kill 斩服少女2017-07-13Fear is freedom! Subjugation is liberation! Contradiction is truth!B站
Vue2.5 Level E 灵异E接触2017-10-03灵异E接触 movie.douban.com/subject/247…
Vue2.6 Macross 超时空要塞2019-02-04movie.douban.com/subject/205…
Vue2.7 Naruto2022-07-01火影忍者 movie.douban.com/subject/142…
Vue3.0 One Piece 海贼王2020-09-18海贼王 book.douban.com/subject/203…
Vue3.1 Pluto2021-06-08book.douban.com/subject/186…
Vue3.2 Quintessential Quintuplets 五等分的花嫁2021-08-10五等分的花嫁 kodansha.us/volume/the-…

作者:辛宝Otto
链接:juejin.cn/post/699884…

好了,言归正传,我们看看Vue2.7更新了什么内容:

向后移植的功能

此外,还支持以下 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 选项(但 )。

升级指南

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_moduleslock 文件并重新安装,以确保它们升级到最新版本。

(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 的稳定性。

上手

新建个Vite项目,初始化后用编辑器打开:

image.png

查看package.json,默认装的是Vue3版本,这里直接卸载掉,然后我们安装最新的vue@2.7.0-alpha.6版本:

image.png

找到项目入口文件src/main.js,删掉无用代码,写一点测试代码:

import Vue, { ref, watch } from "vue/dist/vue";

const App = {
  name: "App",
  template: `
        <div>
            <h2>vue2.7</h2>
            <div>当前数:{{ count }}</div>
            <div>当前数的10倍:{{ bigCount }}</div>
            <button @click="addCount">数字+1</button>
        </div>
    `,
  setup() {
    const count = ref(0);
    const bigCount = ref(0);
    function addCount() {
      count.value++;
    }
    watch(count, (val) => {
      bigCount.value = val * 10;
    });
    return {
      count,
      bigCount,
      addCount,
    };
  },
};

new Vue(App).$mount("#app");

执行npm run dev,在浏览器中打开:

image.png

点击没有任何问题:

image.png

实践得出,在Vue2.7版本中使用组合式API是没有任何问题的。

参考