相比vue2.0版本(Option API)，Composition API（组合API）应该算是3.0的重大变更之一了。 Composition API 主要灵感来源于React Hooks，目的是通过一组低侵入式的、函数式的 API （入口是 setup 函数），使得我们能够更灵活地「 组合 」组件的逻辑。
什么是组合式 API？
Vue3 不在再像 Vue2 一样 ，<script></script> 里 代码片段分为 data , props, methods, computed ，而是采用函数式风格，通过 setup 函数，用组件的选项 (data、computed、methods、watch)传入setup 函数，通过引入的ref、onMounted等方法实现数据的双向绑定、生命周期函数的执行。
// Vue2 options API
export default {
name: 'App',
watch: {
},
computed: {
}
}
// vue3 Composition API
import { watch, computed } from 'vue'
export default {
name: 'App',
setup() {
watch(() => {
// do something
}, () => {
// do something
})
const a = computed(() => {
// do something
})
}
}
setup 存在的意义，就是为了让你能够使用新增的组合 API。并且这些组合 API 只能在 setup 函数内使用。
setup 调用的时机是创建组件实例，然后初始化 props，紧接着就是调用 setup 函数。从生命周期钩子的角度来看，它会在 beforeCreate 钩子之前被调用，所以 setup 内是拿不到 this 上下文的。
为什么需要 组合式 API？ （Compensition Api）
- 在组件比较复杂的情况下，可以将逻辑代码合到一起去，而不会被option强行分隔。这提高了代码质量的上限，同时也拉低了代码质量的下限。来自官方的一张对比图：
-
更好的进行复用。
在vue2中，想要复用部分逻辑的代码，都是通过mixin进去。但mixin进去的内容实际上很不直观，而且相同命名会被覆盖。而通过composition API，因为所有的方法都是引入的，可以将单独某个逻辑进行封装。
-
更好的typescript支持。不会再往vue原型上添加很多内容，而是通过引入的方式，类型定义会更清晰。
在 setup 函数内 使用 组合式 API （Compensition Api）
Vue 3.0 新增的 setup 方法，也是以选项的形式出现在抛出的对象中，但是诸如上述代码中的 watch、computed 等属性，都变成 hook 函数的形式，通过 vue 解构出来，在 setup 方法中使用，如下所示：
// Composition API
import { watch, computed } from 'vue'
export default {
name: 'App',
setup() {
watch(() => {
// do something
}, () => {
// do something
})
const a = computed(() => {
// do something
})
}
}
setup 存在的意义，就是为了让你能够使用新增的组合 API。并且这些组合 API 只能在 setup 函数内使用。
生命周期时机 ： 1 创建组件实例，2 初始化 props，3 紧接着调用 setup 函数。
从生命周期钩子的角度来看，它会在 beforeCreate 钩子之前被调用，所以 setup 内是拿不到 this 上下文的。
setup 如何接受参数
setup 函数接收两个参数，第一个是 props 对象，第二个是 context 上下文。
props 对象：
函数接收 props 作为第一个参数，我们现在需要一个父子组件的传值例子，修改上述 src/App.vue 文件如下：
context 上下文：
ctx（context）参数提供了一个上下文对象，从原来的 Vue 2.0 中的 this 选择性的暴露一些属性。
ctx 为我们提供了三个属性，分别是：
- attrs
- slots
- emit
今天分享就到这里啦 ， 如果内容对你有帮助的话请点个赞，谢谢
作者：chenuvi
参考内容：
vue3 官网教程
