需求:将接口请求到的列表数据赋值给响应数据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)