需求:將接口請求到的列表數據賦值給響應數據arr
const arr = reactive([]);
const load = () => {
const res = [2, 3, 4, 5]; //假設請求接口返回的數據
// 方法1 失敗,直接賦值丟失了響應性
// arr = res;
// 方法2 這樣也是失敗
// arr.concat(res);
// 方法3 可以,但是很麻煩
res.forEach(e => {
arr.push(e);
});
};
vue3使用proxy,對於對象和數組都不能直接整個賦值。
使用方法1能理解,直接賦值給用reactive包裹的對象也不能這麼做。
這是因爲reactive數據被重新賦值後,原來數據的代理函數和最新的代理函數不是同一個,無法被觸發
雙向綁定清空:
清空map:
第一種:
const form= reactive<{[index:string]:any}>({
id:1,
name:"2"
})
Object.keys(form).forEach((v,i)=>{
delete form[v]
})
let ays = object.keys(carSafetyProcessForm);
ays.map((k)=>{
carSafetyProcessForm[k] = undefined
});
第二種:
import { reactive } from 'vue'
const obj = reactive({ name: 'John', age: 25 })
for (const key in Object.keys(obj)) {
obj[key] = undefined
}
第三種:
import { reactive } from 'vue'
const obj = reactive({ name: 'John', age: 25 })
for (const key in obj) {
delete obj[key]
}
數組[]清空:
let data = reactive<Array<RowVO>>([]);
//let data = reactive([]);
data.length = 0 ;//data是數組
//或者
data.splice(0,data.length)