vue 2.7 重大更新，主要功能为Composition API 和 <script setup>，详细的内容查看 vue 2.7.0 CHANGELOG，升级时要遵循 Upgrade Guide。

我升级时的步骤如下：

  • 将 vue 升级到2.7，移除 vue-template-compiler
  • 项目之前使用了 @composition-api 和 vue-demi 包，都移除。并把引用都改成 import from 'vue'
  • 确保所有 nested dependency 的 vue-demi 的版本都是 ^0.13.1（这点下面会详细解释）
  • 将 eslint-plugin-vue 升级到 9+（不然会提示 <script setup> 中的变量是 no-used-var）
  • 项目使用了 vite ，要使用 @vitejs/plugin-vue2 取代 vite-plugin-vue2
  • 升级 devtools

有一些文档没有提到的内容，要额外注意：

  • vue 2.7 中使用 :v-deep(selector) 取代 ::v-deep
  • 继续使用 ::v-deep 会报 warning
  • 如果::v-deep下没有selector，直接就是样式时会报错，比如 ::v-deep { font-size:12px; }
  • 升级到 vue2.7 之后，devtools 不再识别选项式 setup() 中的变量了，只识别 data(){} 和 <script setup> 中的变量。新版本的 devtool 已修复了这个bug。可以正常使用 setup() 了
  • vscode 插件用 volar 替代 vetur （vetur 会提示 <script setup> 中的变量是 no-used-var。而 volar 不会） 经过一周多的使用，决定还是换回 vetur。此时需要把 vetur 的 script 校验关掉，校验靠 eslint 就可以了。在 vscode 的 settings.json 中加上： "vetur.validation.script": false 。弃用 volar 的原因是：
  1. 稳定的报错：Language Features Server server crashed 5 times in the last 3 minutes
  2. snippets 用不惯。比如，我在标签中间打 style，居然提示 <style></style> 而不是 style=""

解释一下上面提到的 确保所有 nested dependency 的 vue-demi 的版本都是 ^0.13.1

Upgrade Guide 中第三条说的就是这个是事：

vue系统升级jquery版本 vue项目升级更新_新版本

根源是：同时使用 vue 2.7 和 @vue/composition-api 会出错 。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7"></script>
    <script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.7.0"></script>
  </head>
  <body>
    <div id="app">
      {{number}}
      <input type="button" value="dianwo" @click="number++" />
    </div>
    <script>
      const { watch, ref } = VueCompositionAPI;
      const app = new Vue({
        el: "#app",
        setup() {
          const number = ref(2);
          watch(number, (val) => {
            console.log(val);
          });
          return { number };
        },
      });
    </script>
  </body>
</html>

报错：

vue系统升级jquery版本 vue项目升级更新_html_02


上面的代码，如果去掉 watch语句，只使用 ref 时是正常的，但是加上 watch就会报错。（不知道后续 vue 或者 @vue/composition-api 会不会修复这个 bug。在修复之前，这两个包是没办法一起用了。）

在我们自己的业务代码中，可以保证不引用 @vue/composition-api。但是依赖的 package 中的代码，就不受我们控制了。

本项目升级时就遇到了这个问题。项目使用 vue-echarts 包，vue-echarts 又依赖了 vue-demi 。但是它依赖的 vue-demi 版本较老，这个版本的逻辑还是：对于所有vue 2，一律使用 @vue/composition-api。这就会导致报错。

新版本的 vue-demi 加了判断，对于 vue2.7，将不会引用 @vue/composition-api 了。但是这属于依赖的依赖，版本不受我们控制，这个时候只能等 vue-echarts 包升级自己的 vue-demi 版本了。（幸好一周后 vue-echarts 就升级好了）

（多说一句。如果项目依赖的 package 依赖了 @vue/compostion-api 或老版本 vue-demi。而这个 package 一直不升级的话，那项目就没办法升 vue2.7 了。）