vue3 uses reactive wrap array to correctly assign the problem

Correct assignment of values using reactive wrap array

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

const arr = reactive([]);
 
const load = () =&gt; {
  const res = [2, 3, 4, 5]; //Suppose the data returned by the request interface  // Method 1 failed, direct assignment lost responsiveness  // arr = res;
  // Method 2 This also fails  // (res);
  // Method 3 OK, but it's very troublesome  (e =&gt; {
    (e);
  });
};

Use vue3proxy, the entire value cannot be assigned directly to both objects and arrays.

Use method 1 can be understood, and directly assign values to usereactiveThe packaged object cannot do this either.

Why can't Method 2 work?

Only push or traversal assignment based on index can the responsiveness of the reactive array be preserved?

How to conveniently splice the entire array onto responsive data?

Several methods are provided

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

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

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

These methods can trigger responsiveness. The first one is recommended

vue3's reactive reassignment is invalid

vue3 official documentation description

reactive() returns a reactive proxy for an object

So the reactive method should act on an 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 code that quoted the original author has been downloaded:

import { reactive, ref } from 'vue'
export default {
  setup() {
    // Requires an array list with default values;      let list = reactive([{id: 1, name: 'Andy'}])
    
    // Reset the list every time the trigger event is triggered and the new value is put in. This method will not trigger the view update    const checkBtn = () =&gt; {
      // The reset operation at this time, the address pointer becomes a new address and will not trigger view update.      list = [{id: 1, name: 'Andy'}]
      ({id: 2, name: 'Lucy'})
    }
    
    // --------------------------------------------------
    // The correct reset method is as follows: Use reactive to wrap an array into an object    let list = reactive({
      data: [{id: 1, name: 'Andy'}]
    });
    const checkBtn = () =&gt; {
       = [{id: 1, name: 'Andy'}]
      ({id: 2, name: 'Lucy'})
    }
    // Or use ref    let list = ref([{id: 1, name: 'Andy'}]);
    const checkBtn = () =&gt; {
       = [{id: 1, name: 'Andy'}]
      ({id: 2, name: 'Lucy'})
    }
    return {
      list,
      checkBtn
    }
  },
}

Summarize