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
  }