「韶光不负，创造不断，本文正在参与2022年中总结征文大赛」

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

在介绍2.7版别之前，咱们先来回顾一下Vue历代版别的代号，请看大图：

Vue2.7尝鲜，代号“ Naruto”

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

版别号 发布日期 相关图片 官方备注 相关链接
Vue0.9 Animatrix 黑客帝国 2014-02-25
Vue2.7尝鲜，代号“ Naruto”
 “…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
Vue2.7尝鲜，代号“ Naruto”
 “A coding sequence cannot be revised once it’s been established.” -Tyrell 银翼杀手 movie.douban.com/subject/129…
Vue0.11 Cowboy Bebop 星际牛仔 2014-11-07
Vue2.7尝鲜，代号“ Naruto”
 “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
Vue2.7尝鲜，代号“ Naruto”
 “If you keep calm you’ll never be a super saiyan.” – Goku 龙珠 movie.douban.com/subject/247…
Vue1.0 Evangelion 新福音战士 2015-10-27
Vue2.7尝鲜，代号“ Naruto”
 “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
Vue2.7尝鲜，代号“ Naruto”
 “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
Vue2.7尝鲜，代号“ Naruto”
 “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 头文字D 2017-02-26
Vue2.7尝鲜，代号“ Naruto”
 Fill’er up. High Octane. movie.douban.com/subject/186…
Vue2.3 JoJo’s Bizarre Adventure JOJO的美妙冒险 2017-04-27
Vue2.7尝鲜，代号“ Naruto”
 It was me, Dio! JOJO的美妙冒险 movie.douban.com/subject/114…
Vue2.4 Kill la Kill 斩服少女 2017-07-13
Vue2.7尝鲜，代号“ Naruto”
 Fear is freedom! Subjugation is liberation! Contradiction is truth! B站
Vue2.5 Level E 灵异E触摸 2017-10-03
Vue2.7尝鲜，代号“ Naruto”
 灵异E触摸 movie.douban.com/subject/247…
Vue2.6 Macross 超时空要塞 2019-02-04
Vue2.7尝鲜，代号“ Naruto”
 movie.douban.com/subject/205…
Vue2.7 Naruto 2022-07-01
Vue2.7尝鲜，代号“ Naruto”
 火影忍者 movie.douban.com/subject/142…
Vue3.0 One Piece 海贼王 2020-09-18
Vue2.7尝鲜，代号“ Naruto”
 海贼王 book.douban.com/subject/203…
Vue3.1 Pluto 2021-06-08
Vue2.7尝鲜，代号“ Naruto”
 book.douban.com/subject/186…
Vue3.2 Quintessential Quintuplets 五等分的花嫁 2021-08-10
Vue2.7尝鲜，代号“ Naruto”
 五等分的花嫁 kodansha.us/volume/the-…

作者：辛宝Otto
链接：/post/699884…

好了，言归正传，咱们看看Vue2.7更新了什么内容：

向后移植的功用

  • Composition API
  • SFC <script setup>
  • SFC CSS v-bind

此外，还支撑以下 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_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 的稳定性。

上手

新建个Vite项目，初始化后用编辑器翻开：

Vue2.7尝鲜，代号“ Naruto”

查看package.json，默许装的是Vue3版别，这儿直接卸载掉，然后咱们装置最新的vue@2.7.0-alpha.6版别：

Vue2.7尝鲜，代号“ Naruto”

找到项目入口文件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，在浏览器中翻开：

Vue2.7尝鲜，代号“ Naruto”

点击没有任何问题：

Vue2.7尝鲜，代号“ Naruto”

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

参考

  • 原文：blog.vuejs.org/posts/vue-2…
  • [译]尤雨溪：Vue3将不会支撑IE11 精力会投入到Vue2.7
  • Vue 2.7 正式发布，代号为 Naruto
  • [火速更新]不出所料 Vue2.7 是火影忍者！尤大提到的动漫你看过几部？