How to use reactive to wrap arrays in vue3 and assign values ​​correctly

Use reactive to wrap the array to correctly assign the value

Requirement: Assign the list data requested by the interface to the response data arr

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);
  });
};

vue3 use proxy, neither objects nor arrays can be directly assigned the entire value.

Using method 1, you can understand that directly assigning to an object wrapped in reactive cannot be done.

Why doesn’t method 2 work?

Only push or index traversal assignment can retain the responsiveness of the reactive array?

How to easily splice the entire array to responsive data?

Provide several methods

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

or

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

or

const arr = reactive([])
 
arr.push(...[1, 2, 3])

These methods can trigger responsiveness, the first one is recommended

vue3's reactive reassignment is invalid

vue3 official documentation

reactive() returns a responsive proxy of an object

So the reactive method should act on an object Object, if you want to use an array, you need to wrap it:

let list = reactive({
    data: [{id: 01, name: 'XXX'}]
})

or use ref:

let list = ref([{id: 1, name: 'Andy'}])

The original author’s code has been quoted:

import { reactive, ref } from 'vue'
export default {
  setup() {
    // 需要一个带默认值的数组list;
      let list = reactive([{id: 1, name: 'Andy'}])
    
    // 每次触发事件重置list，把新值放入,此种方式不会触发视图更新
    const checkBtn = () => {
      // 此时重置操作 地址指向变成一个新的地址，不会触发视图更新
      list = [{id: 1, name: 'Andy'}]
      list.push({id: 2, name: 'Lucy'})
    }
    
    // --------------------------------------------------
    // 正确的重置处理方法如下：使用reactive将数组包裹到一个对象中
    let list = reactive({
      data: [{id: 1, name: 'Andy'}]
    });
    const checkBtn = () => {
      list.data = [{id: 1, name: 'Andy'}]
      list.data.push({id: 2, name: 'Lucy'})
    }
    // 或者使用ref
    let list = ref([{id: 1, name: 'Andy'}]);
    const checkBtn = () => {
      list.value = [{id: 1, name: 'Andy'}]
      list.value.push({id: 2, name: 'Lucy'})
    }
    return {
      list,
      checkBtn
    }
  },
}

The above is the detailed content of How to use reactive to wrap arrays in vue3 and assign values ​​correctly. For more information, please follow other related articles on the PHP Chinese website!