Vue3 reactive 定义一个变量时,如何具有响应式?

发布时间 2023-06-02 14:16:15作者: 小短腿奔跑吧
错误示范
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);
  });
};

 错误原因:

 reactive声明的响应式对象被 arr 代理,操作代理对象需要有代理对象的前缀,直接覆盖会丢失响应式。也就是说,vue3 使用proxy,对于对象和数组都不能直接整个赋值

实现方案:
// 方案1: 使用ref函数
const state = ref([])
state.value = [1, 2, 3]

// 方案2: 使用数组的push方法
const arr = reactive([])
arr.push(...[1, 2, 3])