前言：
本文基于熟练掌握vue2的同学，没有使用过的可以去看官方文档。
挺长时间没有用vue3了，发现看文档浪费的时间还挺长，我想5-10分钟就掌握不容易，于是就想写一篇文章快速让我掌握vue3，于是就有了这篇文章。
相关阅读：
相关UI资源库和插件库：
支持 vue3 的UI组件库: ant-design-vue, element-plus, vant
基于composition组合api的常用集合 : VueUse
1.vue3带来的新变化
+ :
1.性能提升
2.更好的支持typescript
3.组合式API : Composition API
4.不再强制要求只有一个根元素
- ：
1.移除vue2的$on、
2.过滤器
3. .sync语法（与v-model合并）
注：
1.生命周期发生变化-setup替代原先前两个生命周期钩子函数（this指向undefined的原因）
2.package.json、main.js、app.vue文件有些写法上的改变，问题不大。
3.setup函数中记得return
小结：个人以为，vue3和react hooks的写法很像
2.vue3的重点--组合式api的理解
composition API(Vue3)开发的特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便设置，如果功能复杂，代码量大，我们还可以进行逻辑拆分处理。
3.vue3和vue2的优缺点
Vue2选项式API(option api)
优点：简单，各选项各司其职；
缺点：不方便功能复用；功能代码分散维护代码横跳
Vue3组合式API(composition api)
优点：功能代码组合维护, 方便功能复用；
4.使用vue3难点分析
最难理解的点应该是逻辑复用，既拆分各个组件，我们有时很难去把握一个度，不拆分不好复用拆的多了项目后期可能逻辑上不好理解，更别说作为接盘侠的话。
还有一点，使用vue3大部分代码都在setup函数中写，那么如果里面代码多了，岂不是也面临代码臃肿逻辑复杂的情况吗？可以说这个点使得使用vue3的难度上升数倍！
这里我以实际项目使用提出两种方案：
1.在script标签里面setup函数外面定义函数，在setup函数里面引入函数使用。
2.在其他文件夹下建立文件写函数，然后引入在setup函数中使用。
小结：选项式API的精妙之处：分散定义，组合使用。
以下是代码举例：
我们通过定义功能函数，把两个功能相关的代码各自抽离到一个独立的小函数中，然后通过在setup函数中再把两个小功能函数组合起来，这样一来，我们既可以把setup函数变得清爽，又可以方便维护快速定位功能位置。
<script> import { ref } from 'vue' function useShow() { const showDivFlag = ref(true) function show() { showDivFlag.value = true } function hide() { showDivFlag.value = false } return { showDivFlag, show, hide } } function useColor() { const fontColor = ref('') function changeRed() { fontColor.value = 'red' } function changeBlue() { fontColor.value = 'blue' } return { fontColor, changeRed, changeBlue } } export default { name: 'App', setup() { // 功能一 const { showDivFlag, show, hide } = useShow() // 功能二 const { fontColor, changeRed, changeBlue } = useColor() return { showDivFlag, show, hide, fontColor, changeRed, changeBlue } } } </script>
5.vue3的语法
我之前写过一篇如何使用vue3语法的文章，比较详细，有兴趣的可以点进去看看。
