vue3使⽤reactive包裹数组如何正确赋值
需求:将接⼝请求到的列表数据赋值给响应数据arr
const arr = reactive([]);
const load = () => {
const res = [2, 3, 4, 5]; //假设请求接⼝返回的数据
// ⽅法1 失败,直接赋值丢失了响应性
// arr = res;
// ⽅法2 这样也是失败
// at(res);
// ⽅法3 可以,但是很⿇烦
res.forEach(e => {
arr.push(e);
});
};
3使⽤proxy,对于对象和数组都不能直接整个赋值。
使⽤⽅法1能理解,直接赋值给⽤reactive包裹的对象也不能这么做。
reactive 数组
⽅法2为什么不⾏?
只有push或者根据索引遍历赋值才可以保留ive数组的响应性?
如何⽅便的将整个数组拼接到响应式数据上?
提供⼏种办法
const state = reactive({
arr: []
});
state.arr = [1, 2, 3]
或者
const state = ref([])
state.value = [1, 2, 3]
或者
const arr = reactive([])
arr.push(...[1, 2, 3])
这⼏种办法都可以触发响应性,推荐第⼀种

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。