使用 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]
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/web-learn/p/15650158.html
内容来源于网络,如有侵权,请联系作者删除!