网易云-Vue3实战商城后台管理系统开发无mi

download：Vue3实战商城后台管理系统开发

开篇

RT，我们为什么要上 Vue3？使用 Vue3 影响我开法拉利吗？
最近在 Vue3 发布了3.2 大版本之后，掘金上关于 Vue3 的文章越来越多，本来想着让子弹再飞一会，但最近公司上了 Vue3 的项目，自己也跟着学了起来。
昨天还是 Vue2 的 Options API 的忠实信徒，结果今天搞了 Vue3 的 Composition API 之后，直呼 Vue3 真香！
接下来，我们从分析 Vue2 优缺点入手，以及结合图片和用例来了解 Vue3 的优势。
Vue2 ⚔ Vue3
Vue2
优点
不可否认 Vue2 在取得的成功，在 Github 的 Front-End 分类的排行榜上也能看到 Vue 仓库的排名是第一，粉丝足够多，活跃用户足够多

比 React 足足多了 12k+ star
从我的角度来看，最大的功臣莫过于这三个：

响应式数据
Options API
SFC

除去这三位大将，不可或缺 Vuex/Vue-Router 这两位功臣，以及丰富的周边插件和活跃的社区。
缺点
在一个组件仅承担单一逻辑的时候，使用 Options API 来书写组件是很清晰的。
但是在我们实际的业务场景中，一个父组件总是要包含多个子组件，父组件需要给子组件传值、处理子组件事件、直接操作子组件以及处理各种各样的调接口的逻辑，这时候我们的父组件的逻辑就会变得复杂。
我们从代码维护者的角度出发，假设这个时候有 10 个函数方法，自然我们要把他们放入到methods中，而这个 10 个函数方法又分别操作 10 个数据，这个 10 个数据又分别需要进行Watch操作。
这时候，我们根据Vue2的Options API的写法，就写完了 10 个method、10 个data、10 个watch，我们就将本来 10 个的函数方法，分割在 30 个不同的地方。
这时候父组件的代码，对代码维护者来说是很不友好的。

可能有人说，这么写可以增加代码量，老板夸我牛逼！哈哈哈哈

Vue3
优点

自由，自由，还是 TM 的自由！

更强的性能，更好的 tree shaking
Composition API + setup
更好地支持 TypeScript

可能的缺点

Vue3: 让你自由过了火

使用Composition API在setup这个舞台上尽情的表演之后，可能存在一个问题：那就是如何优雅地组织代码？
代码不能优雅的组织，在代码量上去之后，也一样很难维护。
SFC 写法变化

Vue2 一个普通的 Vue 文件