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 連在一起描述，便于相互觀察和對照，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/424970.html
標籤：其他
上一篇：前端之jQuery快速入門