什么是Vue3的組合式 API？
組合式 API 是一系列 API 的集合，使我們可以使用函數而不是聲明選項的方式書寫 Vue 組件。它是一個概括性的術語，涵蓋了以下方面的 API：
- 響應性 API：例如
ref()和reactive()，使我們可以直接創建響應式狀態、計算屬性和偵聽器。 - 生命周期鉤子：例如
onMounted()和onUnmounted()，使我們可以在組件各個生命周期階段添加邏輯。 - 依賴注入：例如
provide()和inject()，使我們可以在使用響應性 API 時，利用 Vue 的依賴注入系統。
在 Vue 3 中，組合式 API 基本上都會配合<script setup>語法在單文件組件中使用。
組合式api所做的
組合式api所實現就是將業務流程集中化，而不是碎片化，業務流程隨著時間滾動。形成一個時間流式的業務流。
為什么要有組合式 API？
更好的邏輯復用
組合式 API 最基本的優勢是它使我們能夠通過組合函數來實現更加簡潔高效的邏輯復用。在選項式 API 中我們主要的邏輯復用機制是 mixins，而組合式 API 解決了?mixins 的所有缺陷。
組合式 API 提供的邏輯復用能力孵化了一些非常棒的社區項目，比如?VueUse，一個不斷成長的工具型組合式函數集合。組合式 API 還為其他第三方狀態管理庫與 Vue 的響應式系統之間的集成提供了一套簡潔清晰的機制，例如?RxJS。
更靈活的代碼組織
許多用戶喜歡選項式 API 的原因是因為它在默認情況下就能夠讓人寫出有組織的代碼：大部分代碼都自然地被放進了對應的選項里。然而，選項式 API 在單個組件的邏輯復雜到一定程度時，會面臨一些無法忽視的限制。這些限制主要體現在需要處理多個邏輯關注點的組件中，這是我們在許多 Vue 2 的實際案例中所觀察到的。
我們以 Vue CLI GUI 中的文件瀏覽器組件為例：這個組件承擔了以下幾個邏輯關注點：
- 追蹤當前文件夾的狀態，展示其內容
- 處理文件夾的相關操作 (打開、關閉和刷新)
- 支持創建新文件夾
- 可以切換到只展示收藏的文件夾
- 可以開啟對隱藏文件夾的展示
- 處理當前工作目錄中的變更
你可以看到，處理相同邏輯關注點的代碼被強制拆分在了不同的選項中，位于文件的不同部分。在一個幾百行的大組件中，要讀懂代碼中的一個邏輯關注點，需要在文件中反復上下滾動，這并不理想。
另外，如果我們想要將一個邏輯關注點抽取重構到一個可復用的工具函數中，需要從文件的多個不同部分找到所需的正確片段。
而如果用組合式 API 重構這個組件，將會變成下面右邊這樣：
響應式（核心類）
1. ref()--定義響應式數據
ref()接受一個基本數據類型的參數，返回一個響應式的、可更改的 ref 對象，此對象只有一個指向其內部值的屬性?.value。如果將一個對象賦值給 ref，那么這個對象將通過?reactive()?轉為具有深層次響應式的對象。
2. reactive()--定義響應式數據
reactive()接受一個對象，包括json數據和數組都可以，返回一個對象的響應式代理。
3. computed()--計算屬性
computed()接受一個 getter 函數，返回一個只讀的響應式?ref對象。該 ref 通過?.value?暴露 getter 函數的返回值。它也可以接受一個帶有?get?和?set?函數的對象來創建一個可寫的 ref 對象。
4.watch()--監聽
watch()監聽一個或多個響應式數據源，并在數據源變化時調用所給的回調函數。默認是懶監聽，即源發生變化時才執行回調函數。函數接受三個參數:
- 監聽器的源數據(一個函數，返回一個值。一個ref。一個響應式對象。或以上三種類型組成的數組)
- 第二個參數是在發生變化時要調用的回調函數。接受三個參數：新值、舊值，以及一個用于注冊副作用清理的回調函數
- 第三個可選的參數是一個對象（對象屬性支持
immediate,deep,flush,onTrack / onTrigger）
5. watchEffect()
watchEffect()立即運行一個函數，同時響應式地追蹤其依賴，并在依賴更改時重新執行。
- 第一個參數就是要運行的副作用函數
- 第二個參數就是一個可選的對象，跟watch第三個參數一致
watch() 跟 watchEffect()區別
- 1.
watch是惰性執行，也就是只有監聽的值發生變化的時候才會執行，但是watchEffect不同，每次代碼加載watchEffect都會執行。 - 2.
watch?會明確監聽某一個數據，而?watchEffect?則是監聽回調函數中響應數據。 - 3.
watch可以訪問之前的值，而watchEffect不可以。
注意
1、setup是vue3中的一個全新的配置項，值為一個函數；
2、setup是所有CompositionAPI（組合API）的基礎，組件中所用到的數據、方法等都需要在setup中進行配置；
setup中的兩種返回值
返回一個對象，對象中的屬性、方法，在模板中均可直接使用（重點）
export default {
name: 'App',
setup(){
// 數據
let name = '張三'
let age = '18'
// 方法
function sayHello(){
alert(`我叫${name},我${age}歲了，你好啊`)
}
// 第一種return，返回一個對象
return{
name,
age,
sayHello
}
}
}
返回一個渲染函數：可以自定義渲染內容（了解）
export default {
name: 'App',
setup(){
// 數據
let name = '張三'
let age = '18'
// 方法
function sayHello(){
alert(`我叫${name},我${age}歲了，你好啊`)
}
// 第二種return，返回一個渲染函數
return ()=> { return h('h1','尚硅谷') }
// 簡寫
// return ()=> h('h1','尚硅谷')
}
}setup不能是一個async函數，因為返回值不再是return的對象，而是promise，模板看不到return對象中的屬性；
