升级 Vue版本从 2.5.x 到 2.6.x

升级 Vue版本从2.5.x到2.6.x

start

• 最近项目中需要使用某些第三方插件，但是第三方插件对 vue 的版本有要求。

  插件要求 vue版本为 vue2.6.x 的，而我现有的环境是 vue2.5.x 的。

• 记录一下 升级 Vue 版本从 2.5.x 到 2.6.x 的过程。

正文

1. 更改 package.json

首先第一步，修改 package.json 中的 "vue": "2.6.x"，然后删除旧的 node_modules，执行npm i ，重新安装依赖。

安装依赖的过程中没有报错，但是在启动本地的前端服务的时候，发生了报错

用翻译工具翻译一下上面的提示：

简单解释一下上述的报错提示：

• 它的意思是 vue-template-compiler 和我们的 vue 版本不匹配。需要做一下处理。
• 根据我们的 vue-loader 的版本，做不同逻辑处理。
• 如果 vue-loader 版本大于等于10.0，只需要更新 vue-template-compiler 版本即可；
• 如果 vue-loader 版本小于10.0，需要重新安装 vue-loader/vueify

2. 查看 vue-loader 版本

我打开一下 node_modeles 里面的 vue-loader ，查看一下的 vue-loader的版本。

由上图可知，我的vue-loader版本为 15.11.1。所以我只需要更新 vue-template-compiler 版本即可。

简单解释一下vue-loader是做什么的

vue-loader就是一个第三方库，然后帮助我们解析 .vue文件 的插件。

结合wabpack使用，解析我们的 .vue 文件成可以执行的js。

3. 更新 vue-template-compiler

如何更新vue-template-compiler？

修改 package.json 中的 "vue-template-compiler": "2.5.17", 为 "vue-template-compiler": "2.6.x",

删除旧版本依赖，重新安装依赖即可。

为什么版本是2.6.x?

• 网络上找到大多数资料推荐 2.6.x；(我个人暂时没找到官方的说明)

• ps：查看了官网说明。 vue@2.7.x废弃了vue-template-compiler。

  

更新完毕 vue-template-compiler 之后，运行项目，手动测试没有发现比较明显的问题。

4. 还有哪些没有注意到的地方？

虽然是小版本升级，但是涉及到核心库的更新，还是小心谨慎一点。

我搜索了相关资料，目前整理到这几点注意事项：

1. vue 版本增加；

   已处理√

2. vue-template-compiler版本增加

   已处理√

3. nextTick异步实现逻辑变更

   √ （调整了部分微任务替代方案的执行顺序，pc端主流浏览器应当不受影响）

   nextTick 在 vue 2.5 和 vue 2.6 之间有什么不同

4. 新增了 v-slot 插槽语法，废弃 slot 和 slot-scope

   √ (完全向后兼容，2.x保留原本语法，预计3.x完全删除。新增了 v-slot，优化了简写形式下插槽嵌套导致的作用域不清晰的问题；简化了插槽的使用方式。)

   官方对 slot，slot-scope 和 v-slot 的说明

   

end

本文完。