Composition API也叫组合式API，是Vue3.x的新特性。
没有Composition API之前vue相关业务的代码需要配置到option的特定的区域，中小型项目是没有问题的，但是在大型项目中会导致后期的维护性比较复杂，同时代码可复用性不高。Vue3.x中的composition-api就是为了解决这个问题而生的。

compositon-api提供了以下几个函数：

setup
ref
reactive
watchEffect
watch
computed
toRefs
生命周期的hooks

一、setup() 函数

是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

1、setup()函数执行时机

setup 函数会在 beforeCreate 之后、created 之前执行，即在创建组件之前执行。由于在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

2、setup() 函数中的参数

setup() 函数的第一个参数是 props ，组件接收的 props 数据可以在 setup() 函数内访问到。setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

props: {
  title: String
}
setup(props) {
    console.log(props.title)
}

因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。如果需要解构 prop，可以通过使用 setup 函数中的 toRefs 来安全地完成此操作。

import { toRefs } from ‘vue‘

setup(props) {
	const { title } = toRefs(props)

	console.log(title.value)
}

setup() 的第二个参数是context（上下文对象），它是一个上下文对象，可以通过 context 来访问Vue的实例 this 。

setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs
  }