1 縮略語
rd: 響應式數據，就是vue2中data()函數返回的內容
rf: 處理響應式數據的函數，就是vue2中methods, watch, computed等選項中定義的一堆函數。
2 vue2 的問題
假設一個vue組件的代碼有好幾千行。如下所示：
| export default { data() { return { // 一大堆響應式數據 rd a, // 處理數據 a 的函數請向下 3000 行 b, // 處理數據 b 的函數請向下 4000 行 c, // 處理數據 c 的函數請向下 5000 行 d, // 處理數據 d 的函數請向下 6000 行 }; },
created() { }， mounted() { },
// 第 3000 行 // methods 選項中定義了一大堆處理響應式數據的函數 rf methods: { // 處理響應式數據 a 的一堆函數 // 處理響應式數據 b 的一堆函數 // 處理響應式數據 c 的一堆函數 // 處理響應式數據 d 的一堆函數 },
// 第 7000 行 watch: {
}, // 第 8000 行 computed: {
}, } |
vue2的問題：
響應式數據 rd 及其處理函數 rf 被割裂在不同段落中描述，相隔數千行，要相互對照觀察非常麻煩。
3 目標
響應式數據 rd 及其處理函數 rf 連在一起描述，便於相互觀察和對照。
4 解決辦法
步驟如下：
S1：聲明和定義一個名稱為 setup 的函數。
vue 編譯系統一看到函數名稱為 setup，就知道這個函數集中了響應式數據 rd 及其處理函數 rf，就另眼相待，做專門處理。
setup 函數的內容如下：
S2：聲明和定義響應式數據 rd
S3：聲明和定義響應式數據處理函數 rf
S4：以 rd 和 rf 為屬性構造一個Object，簡稱 ro。
S5：setup 函數返回 ro。
示例如下：
| export default { // 聲明和定義響應式數據 rd 及其處理函數 rf 的專用函數 setup() { //--------------------------------------------------------------------- // 聲明和定義響應式數據 a const a = reactive({ count: 0, // 計算屬性 double: computed(() => a.count * 2), });
// 緊接着，聲明和定義響應式數據 a 的處理函數 function f_a() { a.count ++; }
//--------------------------------------------------------------------- // 聲明和定義響應式數據 b const b = reactive({ count: 0, // 計算屬性 double: computed(() => b.count * 2), });
// 緊接着，聲明和定義響應式數據 b 的處理函數 function f_b() { b.count ++; }
// 以 響應式數據及其處理函數 為 屬性 構造一個 Object，作為 setup 函數的返回值 return { a, f_a, b, f_b, }; }, } |
5 究竟什么是組合式API?
組合式 API 特指 setup 函數。
vue編譯系統一看到函數名稱為 setup，就知道這個函數集中了響應式數據 rd 及其處理函數 rf，就另眼相待，做專門處理。
“組合”的意思就是響應式數據 rd 及其處理函數 rf 連在一起描述，便於相互觀察和對照。