Vue2.7尝鲜，代号“ Naruto”

lxf2023-05-05 13:15:01

首页 > vue
> 正文

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

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

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

向后移植的功能

Composition%20API
SFC%20<script%20setup>
SFC%20CSS%20v-bind

此外，还支持以下%20API：

defineComponent()：具有改进的类型推断（与Vue.extend相比）；
h()、useSlot()、useAttrs()、useCssModules()；
set()、del()%20和%20nextTick()%20在%20ESM%20构建中也作为命名导出提供。

Vue%202.7%20还支持在模板表达式中使用%20ESNext%20语法。使用构建系统时，编译后的模板渲染函数将通过为普通%20JavaScript%20配置的相同%20loaders%20/%20plugins。这意味着如果为.js文件配置了%20Babel，它也将应用于%20SFC%20模板中的表达式。

注意事项

在%20ESM%20构建中，这些%20API%20作为命名导出提供（仅限于命名导出）：

import%20Vue,%20{%20ref%20}%20from%20'vue'

Vue.ref%20//%20undefined,%20改用命名导出

在%20UMD%20和%20CJS%20构建中，这些%20API%20作为全局%20Vue%20对象上的属性暴露。

与%20Vue%203%20的行为差异

Composition%20API%20使用%20Vue%202%20的基于%20getter/setter%20的响应式系统进行反向移植，以确保浏览器兼容性。%20这意味着与%20Vue%203%20的基于%20proxy%20的系统存在一些重要的行为差异：

所有%20Vue%202%20更改检测警告仍然适用；
reactive()、ref()%20和%20shallowReactive()%20将直接转换原始对象而不是创建代理：

//%20在2.7中可行，在3.x中不可行
reactive(foo)%20===%20foo

readonly()%20确实创建了一个单独的对象，但它不会跟踪新添加的属性并且不适用于数组；
避免在%20reactive()%20中使用数组作为%20root%20值，因为如果没有属性访问，则不会跟踪数组的变化（这将导致警告）；
Reactivity%20APIs%20忽略带有%20symbol%20键的属性。

此外，以下功能是未移植的：

❌%20createApp()（Vue%202%20没有独立的应用范围）
❌%20<script%20setup>%20中的顶层%20await（Vue%202%20不支持异步组件初始化）
❌%20模板表达式中的%20TypeScript%20语法（与%20Vue%202%20解析器不兼容）
❌%20Reactivity%20transform（仍处于试验阶段）
❌%20options%20组件不支持%20expose%20选项（但%20）。

升级指南 Vue%20CLI%20/%20webpack

（1）将本地%20@vue/cli-xxx%20依赖项升级到主要版本范围内的最新版本（如果适用）：

对于%20v4：%20~4.5.18
对于%20v5：%20~5.0.6

（2）将%20Vue%20升级到%20^2.7.0。%20还可以从依赖项中删除%20vue-template-compiler，因为在%202.7%20中不再需要它。注意：如果正在使用%20@vue/test-utils，可能需要暂时将它保留在依赖项中，但是这个要求也将在新版本的%20Test%20Utils%20中被取消。

（3）检查包管理器%20lock%20文件以确保以下依赖项满足版本要求。%20它们可能是%20package.json%20中未列出的传递依赖项：

vue-loader:%20^15.10.0
vue-demi:%20^0.13.1

如果没有，需要删除%20node_modules%20和%20lock%20文件并重新安装，以确保它们升级到最新版本。

（4）如果之前使用过%20@vue/composition-api，请将其导入更新为%20vue。%20注意，插件导出的一些%20API，例如%20createApp，未在%202.7%20中移植。

（5）如果在使用%20<script%20setup>%20时遇到未使用的变量的%20lint%20错误，请将%20eslint-plugin-vue%20更新到最新版本%20(9+)。

（6）Vue%202.7%20的%20SFC%20编译器现在使用%20PostCSS%208。%20PostCSS%208%20应该向后兼容大多数插件，但如果以前使用只能与%20PostCSS%207%20一起使用的自定义%20PostCSS%20插件，升级可能会导致问题。在这种情况下，需要将相关插件升级到与%20PostCSS%208%20兼容的版本。

Vite

Vue2.7%20对%20Vite%20的支持是通过一个新插件提供的：@vitejs/plugin-vue2。这个新插件需要%20Vue%202.7%20或更高版本并取代现有的%20vite-plugin-vue2。

注意，新插件不处理特定于%20Vue%20的%20JSX%20/%20TSX%20transform，这是有意的。%20Vue%202%20JSX%20/%20TSXtransform应该在一个单独的专用插件中处理，该插件将很快提供。

Volar%20兼容性

Vue%202.7%20提供了改进的类型定义，因此不再需要安装%20@vue/runtime-dom%20来支持%20Volar%20模板类型推断。%20现在只需要在%20tsconfig.json%20中进行以下配置：

{
%20%20//%20...
%20%20"vueCompilerOptions":%20{
%20%20%20%20"target":%202.7
%20%20}
}

Devtools%20支持

Vue%20Devtools%206.2.0%20增加了对检查%202.7%20Composition%20API%20状态的支持，但扩展可能仍需要几天时间在各个发布平台上通过审核。

2.7%20版本的影响

Vue%202.7%20是%20Vue%202.x%20的最终次要版本。%20在这个版本之后，Vue%202%20进入了%20LTS（长期支持），从现在开始持续%2018%20个月，并且将不再接收新功能。这意味着%20Vue%202%20将在%202023%20年底结束其生命周期。这应该为大多数生态系统迁移到%20Vue%203%20提供充足的时间。

额外细节

在准备此版本时，Vue%20团队将%20Vue%202%20代码库从%20Flow%20移植到了%20TypeScript，这是基于核心团队成员%20@pikax%20的努力。%20这样更容易重用%20Vue%203%20中的代码，并为移植的%20API%20自动生成类型定义。%20除此之外，还将单元测试从%20Karma%20+%20Jasmine%20移至%20Vitest，从而大大提高了维护%20DX%20和%20CI%20的稳定性。

上手

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

查看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");