04 | 升级：Vue 2项目如何升级到Vue 3？

大圣



该思维导图由 AI 生成，仅供参考

你好，我是大圣，欢迎进入课程导读篇的第四讲。
在上一讲，我带你了解了 Vue 3 的新特性。对于 Vue 3 相比于 Vue 2 有哪些优势这个问题，相信你已经了解得很清楚了。那么在这一讲，我来教你如何把 Vue 2 的项目升级到 Vue 3。
把 Vue 2 的项目升级到 Vue 3，也是小圣一直关心的问题，今天早晨小圣还问我，既然 Vue 3 如此优秀，是不是应该赶紧把项目都升级到 Vue 3？
首先不要着急，并不是所有项目都适合升级。就像苹果出了新款手机，哪怕新特性被人们说得天花乱坠，但是，是不是把老手机换掉，也需要斟酌，毕竟升级总是需要成本的。
应不应该从 Vue 2 升级到 Vue 3应不应该升级？这个问题不能一概而论。
首先，如果你要开启一个新项目，那直接使用 Vue 3 是最佳选择。后面课程里，我也会带你使用 Vue 3 的新特性和新语法开发一个项目。
以前我独立使用 Vue 2 开发应用的时候，不管我怎么去组织代码，我总是无法避免在 data、template、methods 中上下反复横跳，这种弊端在项目规模上来之后会更加明显。而且由于 vue-cli 是基于 Webpack 开发的，当项目规模上来后，每执行一下，调试环境就要 1 分钟时间，这也是大部分复杂项目的痛点之一。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

Vue 2 项目升级到 Vue 3 是当前备受关注的话题。本文深入探讨了升级的必要性、Vue 3 的不兼容写法以及生态现状。首先，文章指出并非所有项目都适合升级，需要根据具体情况选择合适的方式。讨论了 Vue 3 带来的 Composition API 和 Vite 的优势，以及对 IE11 的兼容性问题。此外，还介绍了 Vue 3 不兼容的写法，以及 Vue 3 的生态现状，包括 Vue-cli4、vue-router、Vuex 4.0 等工具和库对 Vue 3 的支持情况。文章还提到了使用自动化升级工具进行 Vue 3 升级的方法，包括 @vue/compat 库和 gogocode 工具的使用。总的来说，本文通过对 Vue 2 升级到 Vue 3 的相关问题进行了全面的分析和讨论，为读者提供了清晰的指导和建议。文章内容涵盖了升级的必要性、具体操作步骤以及工具的使用，对于需要升级到 Vue 3 的读者具有很高的实用价值。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(28)

最新
精选

cwang
谢谢大圣老师的讲解，我还有一个小的疑惑，我们通常创建Vue应用，一个实例（new Vue({})）就能满足我们的使用场景了，而且也认为应该只存在一个。但是在课程里老师说（Vue2和Vue3启动不同）：有一个页面的多个应用的情况。所以想了解下，什么情况下会遇到这种场景呢？这个问题不是这节课的主题，但是还是很好奇，谢谢大圣老师解惑。
作者回复: 这种场景非常少，不过我遇见过，就是有的后台管理系统是jquery的，有的模块后来的前端就像用vue开发，就会有一些部分模块使用的vue，多个模块之间就会用不同的vue实例
2021-10-25
5
25
。。。
有几个问题需求请教下： 1. Tree-shaking 清理代码什么意思，什么时候用 2. 到底什么是 Composotion api ，vue 2 的是 Options api? 3. vue3 周边，或者说是 vue 全家桶都包括哪些vue技术 4. AST 是什么，全称是什么 5. 虚拟 DOM 是什么，怎么理解
作者回复: 1. tree shaking就是打包的时候可以删掉你没有用到的模块，减小上线代码的体积 2. 我们课程中用的全部都是componsition api，vue2中全部都是从this上取数据的方式就是options api 3. 全家桶就是vuex vue-router 加上一个组件库 4，ast全称是抽象语法树 5. 虚拟dom就是用js的对象去描述一个html标签或者组件
2021-10-29
3
14
ll
全面拥抱Vue 3会有更好的待遇，敲敲黑板，重点😎
作者回复: 那是必须的工资驱动
2021-10-25

13
码农初上路
大圣好，vue2.7最低也能支持到IE9吗？
作者回复: 对的，Vue2基于Object.defineProperty来做，兼容不了IE8
2021-10-25

12
CondorHero
讲的很细，很赞👍🏻，有个小需求，希望大圣老师加上推荐阅读这样类似的章节。
作者回复: 阅读推荐指的是文章合集吗？
2021-10-25
3
7
南山
打卡目前部门的老项目用的@compositon/api包使用vue3的composition api来重构和优化，新项目直接使用vue3来开发开阔眼界了，使用ast语法编译来转换vue2代码，真是一劳永逸！
作者回复: 看来是用了gogocode，是不是非常的哇塞
2021-10-26

5
淡若清风过
拐了，还以为已经录制好的视频拿来卖，看来是到明年都更新不完
作者回复: 极客时间的更新策略，也算是帮你制定了一个学习计划吧
2021-10-26

4
无双
麻烦问一下，在哪有vue2的支持周期？
作者回复: Vue3的全球发布会上，尤雨溪ppt里，Vue2还会支持18个月
2021-10-25

4
不负
讲得很全面了，就是不太理解下面这段里，一个全局组件，有多个Vue实例，不就是全局组件吗，这里的“造成混淆”是指什么？ “我们在 Vue 上先注册了一个组件 el-counter，然后创建了两个 Vue 的实例。这两个实例都自动都拥有了 el-couter 这个组件，但这样做很容易造成混淆。” ``` Vue.component('el-counter',...) new Vue({el:'#app1'}) new Vue({el:'#app2'}) ```
作者回复: 指的是在一部分老的项目中，一个页面会有好几个Vue的实例，就是用new Vue创建好几次，会有命名混淆的问题，大部分项目都是一个Vue的实例，这是一个边缘的case
2021-12-21

3
球球
vue2升级成vue3 对应用到的element ui 也要升级是吗
作者回复: 是这样的，可以选择element-plus或者element3
2021-10-25
3
3

收起评论