目录
前言：
本文基于熟练掌握vue2的同学，没有使用过的可以去看官方文档。
挺长时间没有用vue3了，发现看文档浪费的时间还挺长，我想5-10分钟就掌握不容易，于是就想写一篇文章快速让我掌握vue3，于是就有了这篇文章。
相关阅读： Vue3 中文文档
https://vue3js.cn/docs/zh/ Vue3 设计理念https://vue3js.cn/vue-composition/ 相关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语法的文章，比较详细，有兴趣的可以点进去看看。
