使用 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也失效。

解决方案:

方案一:创建一个响应式对象,对象的属性是数组(常用,推荐使用)

let state = reactive({
  list: [],
})
let arr = [1,2,3]
state.list = arr

方案二:使用ref函数(常用,推荐使用)

const arr = ref([])
arr.value = [1, 2, 3]

方案三:使用数组的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)

Logo

前往低代码交流专区

更多推荐