組合式 API 基礎 - Vue3中文文檔
Setup - Vue3中文文檔
setup 是壹個組件選項，所以像別的組件選項壹樣，寫在組件導出的對象裏。
官方文檔如此描述：
setup 選項應該是壹個接受 props 和 context 的函數。
此外，我們從 setup 返回的所有內容都將暴露給組件的其余部分 (計算屬性、方法、生命周期鉤子等等) 以及組件的模板。
個人覺得可以理解為：
正如在壹個標準組件中所期望的那樣， setup 函數中的 props 是響應式的，當傳入新的 prop 時，它將被更新。
context 上下文是壹個普通的 JavaScript 對象，它暴露三個組件的 property：
context 是壹個普通的 JavaScript 對象，也就是說，它不是響應式的，這意味著妳可以安全地對 context 使用 ES6 解構。
attrs 和 slots 是有狀態的對象，它們總是會隨組件本身的更新而更新。這意味著妳應該避免對它們進行解構，並始終以 attrs.x 或 slots.x 的方式引用 property。請註意，與 props 不同， attrs 和 slots 是非響應式的。如果妳打算根據 attrs 或 slots 更改應用副作用，那麽應該在 onUpdated 生命周期鉤子中執行此操作。
如果 setup 返回壹個對象，則可以在組件的模板中像傳遞給 setup 的 props property 壹樣訪問該對象的 property：
setup 還可以返回壹個渲染函數，該函數可以直接使用在同壹作用域中聲明的響應式狀態：
新的 setup 組件選項在 創建組件之前 執行，壹旦 props 被解析，並充當合成 API 的入口點。
在 setup() 內部， this 不會是該活躍實例的引用，因為 setup() 是在解析其它組件選項之前被調用的，所以 setup() 內部的 this 的行為與其它選項中的 this 完全不同。這在和其它選項式 API 壹起使用 setup() 時可能會導致混淆。
reactive() 接收壹個普通對象然後返回該普通對象的響應式代理。等同於 2.x 的 Vue.observable()
響應式轉換是“深層的”：會影響對象內部所有嵌套的屬性。基於 ES2015 的 Proxy 實現，返回的代理對象 不等於 原始對象。建議僅使用代理對象而避免依賴原始對象。
接受壹個參數值並返回壹個響應式且可改變的 ref 對象。ref 對象擁有壹個指向內部值的單壹屬性 .value 。
如果傳入 ref 的是壹個對象，將調用 reactive 方法進行深層響應轉換。
使用響應式 computed API 有兩種方式：
傳入壹個對象（響應式或普通）或 ref，返回壹個原始對象的 只讀 代理。壹個只讀的代理是“深層的”，對象內部任何嵌套的屬性也都是只讀的。
立即執行傳入的壹個函數，並響應式追蹤其依賴，並在其依賴變更時重新運行該函數。
當 watchEffect 在組件的 setup() 函數或生命周期鉤子被調用時， 偵聽器會被鏈接到該組件的生命周期，並在組件卸載時自動停止。
在壹些情況下，也可以顯式調用返回值以停止偵聽：
有時副作用函數會執行壹些異步的副作用, 這些響應需要在其失效時清除（即完成之前狀態已改變了）。所以偵聽副作用傳入的函數可以接收壹個 onInvalidate 函數作入參, 用來註冊清理失效時的回調。當以下情況發生時，這個 失效回調 會被觸發:
我們之所以是通過傳入壹個函數去註冊失效回調，而不是從回調返回它（如 React useEffect 中的方式），是因為返回值對於異步錯誤處理很重要。
在執行數據請求時，副作用函數往往是壹個異步函數：
我們知道異步函數都會隱式地返回壹個 Promise，但是清理函數必須要在 Promise 被 resolve 之前被註冊。另外，Vue 依賴這個返回的 Promise 來自動處理 Promise 鏈上的潛在錯誤。
Vue 的響應式系統會緩存副作用函數，並異步地刷新它們，這樣可以避免同壹個 tick 中多個狀態改變導致的不必要的重復調用。在核心的具體實現中, 組件的更新函數也是壹個被偵聽的副作用。當壹個用戶定義的副作用函數進入隊列時, 會在所有的組件更新後執行：
在這個例子中：
請註意，初始化運行是在組件 mounted 之前執行的。因此，如果妳希望在編寫副作用函數時訪問 DOM（或模板 ref），請在 onMounted 鉤子中進行：
如果副作用需要同步或在組件更新之前重新運行，我們可以傳遞壹個擁有 flush 屬性的對象作為選項（默認為 'post' ）：
onTrack 和 onTrigger 選項可用於調試壹個偵聽器的行為。
這兩個回調都將接收到壹個包含有關所依賴項信息的調試器事件。建議在以下回調中編寫 debugger 語句來檢查依賴關系：
onTrack 和 onTrigger 僅在開發模式下生效。
watch API 完全等效於 2.x this.$watch （以及 watch 中相應的選項）。 watch 需要偵聽特定的數據源，並在回調函數中執行副作用。默認情況是懶執行的，也就是說僅在偵聽的源變更時才執行回調。
可以直接導入 onXXX 壹族的函數來註冊生命周期鉤子：