问题描述:
使用 reactive 包装数组响应式失效。
或: reactive 使用时响应式失效。我们通过 reactive 定义一个响应式数组,网络请求返回的数据,赋值给数组之后,页面上的数据并没有更新。
具体的代码:
const arr = reactive([]);
const load = () => {
const res = [2, 3, 4, 5]; //假设请求接口返回的数据
// 方法1 失败,直接赋值丢失了响应性
// arr = res;
// 方法2 这样也是失败
// arr.concat(res);
};
这是什么原因呢?
原因:
方法1:arr = res 时,直接把一个 res 新数组赋值给了 arr。reactive 声明的响应式对象被 arr 代理,操作代理对象需要有代理对象的前缀,此时的 res 直接把值赋值给了 arr ,使得 arr 失去了响应式。在vue3使用proxy,对于对象或数组都不能直接将整个数据赋值。
使用方法2时,把 arr 直接当成一个数组,经过 reactive 包装之后,arr 已经不是普通的数组了,所以方法2也失效。
解决方案:
方案一:使用 数组的 push 方法:
let list = reactive([])
let arr = [1, 2, 3]
arr.forEach((item) => {
list.push(item)
})
或
let list = reactive([])
let arr = [1, 2, 3]
list.push(...arr)
方案二:创建一个响应式对象,对象的属性是数组
let state = reactive({
list: [],
})
let arr = [1,2,3]
state.list = arr
推荐使用该方法。
方案三:使用 ref 函数
const arr = ref([])
arr.value = [1, 2, 3]