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 文件
<template>
<div>

<p>{{ person.name }}</p><p>{{ car.name }}</p>

</div>
</template>

<script>
export default {
name: "Person",

data() {

return {  person: {    name: "小明",    sex: "male",  },  car: {    name: "宝马",    price: "40w",  }};

},

watch:{

  'person.name': (value) => {      console.log(`名字被批改了, 批改为 ${value}`)  },  'person.sex': (value) => {      console.log(`性别被批改了, 批改为 ${value}`)  }

},

methods: {

changePersonName() {  this.person.name = "小浪";},changeCarPrice() {  this.car.price = "80w";}

},
};