vue3語法-響應式資料和組合setup
阿新 • • 發佈：2022-04-06
連結：http://ggz.longpanda.top/article_detail?id=23
setup和mixins的區別
Mixin的缺陷：
1、很容易發生衝突：因為每個 mixin 的 property 都被合併到同一個元件中，所以為了避免 property 名衝突，你仍然需要了解其他每個特性。
2、可重用性是有限的：我們不能向 mixin 傳遞任何引數來改變它的邏輯，這降低了它們在抽象邏輯方面的靈活性。
因此，為了解決這些問題，我們添加了一種通過邏輯關注點組織程式碼的新方法：組合式 API。
陣列和物件的賦值
注意：物件和陣列直接賦值不能觸發響應式，push或者根據索引遍歷賦值可以保留reactive陣列的響應性，或者將陣列存在一個物件內，如下：
推薦：
const state = reactive({
arr: []
})
state.arr = [];
不能
const arr = reactive([])
arr = []
ref
ref ： 為資料新增響應式狀態，不會影響原始資料 ，一次只能定義一個ref響應式資料.
應用：需要觸發頁面更新，可用於任何型別的資料建立響應式（傳入引用型別，實際內部又呼叫reactive方法為其建立響應式），但官方建議用於基本資料型別。通過.value 的方式去訪問其資料
原理：ref 則是用把資料給包裝成 ref 物件, .value 的方式去訪問其資料,在 setup 中嗎,在模板中不需要, 因為會自動新增.value。vue 強烈建議 ref 用來處理 非指標型別的資料型別, string number 等, 通過給 value 屬性新增 getter/setter 來實現對資料的劫持
reactive
reactIve：用來處理物件，陣列，等指標型別的資料
應用：需要觸發頁面更新，只用於建立引用型別資料的響應式。解構會失去響應式，所以解構需配合toRefs使用
原理：reactive 是利用 proxy 來實現
export default { name:'Page2', setup(){ const state = reactive({ name:"張三", age:20 }) return{ ...toRefs(state)//解構賦值後資料就會失去響應式，需要用toRefs讓物件擁有ref響應式屬性，UI才會檢視更新 } } }
toRef、toRefs
toRef: 使用toRef將某個物件中的屬性變成響應式資料，修改響應式資料是會影響到原始資料的。但是需要注意，如果修改通過toRef建立的響應式資料，並不會觸發UI介面的更新。 所以，toRef的本質是引用，與原始資料有關聯
import {toRef} from 'vue'; export default { name:'App' setup(){ let obj = {name : 'alice', age : 12}; let newObj= toRef(obj, 'name'); function change(){ newObj.value = 'Tom'; console.log(obj,newObj) } return {newObj,change} } }
上述程式碼，當change執行的時候，響應式資料發生改變，原始資料obj也會改變，但是唯獨UI介面不會更新
上面兩個介紹了，ref 和 reactive 可以改變頁面。接下來這兩個則不能去改變頁面，但是資料還是會遵循響應式。
小結：
ref和toRef的區別、特點：
(1). ref本質是拷貝，修改響應式資料不會影響原始資料；toRef的本質是引用關係，修改響應式資料會影響原始資料
(2). ref資料發生改變，介面會自動更新；toRef當資料發生改變是，介面不會自動更新
(3). toRef傳參與ref不同；toRef接收兩個引數，第一個引數是哪個物件，第二個引數是物件的哪個屬性
(4). toRef 用於建立物件指定的屬性響應式，換句話說就是隻能控制一個物件中的一個屬性。
(5). toRefs 用於建立物件響應式。
(6). 他們對響應式的處理你可以理解為： toRef 類似 ref， toRefs 類似 reactive
| 型別 | 是否觸發頁面改變 | 是否可以結構 |
|---|---|---|
| ref | 是 | 否 |
| reactive | 是 | 否 |
| toRef | 否 | 否 |
| toRefs | 否 | 是 |
setup組合用法
rem.js檔案: import {reactive} from 'vue'; function useRemoveStudent() { let state = reactive({ }); function remStu(index) {} return {state, remStu}; } export default useRemoveStudent; add.js: import {reactive} from 'vue'; function useAddStudent(state) { let state2 = reactive({ }); function addStu(e) { } return {state2, addStu} } export default useAddStudent; 主檔案app.vue