共计 1388 个字符，预计需要花费 4 分钟才能阅读完成。
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";}},
};