网易云-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 文件
<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";
}

},
};