So verwenden Sie Reactive, um Arrays in vue3 zu umschließen und Werte korrekt zuzuweisen

Verwenden Sie reaktiv, um das Array zu umschließen, um den Wert korrekt zuzuweisen.

Anforderung: Weisen Sie die von der Schnittstelle angeforderten Listendaten den Antwortdaten zu. 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 verwendet proxy und auch nicht das Objekt Noch kann dem Array direkt der gesamte Wert zugewiesen werden. proxy，对于对象和数组都不能直接整个赋值。

使用方法1能理解，直接赋值给用reactive

Sie können Methode 1 verstehen, aber Sie können dies nicht tun, wenn Sie sie direkt einem mit reactive umschlossenen Objekt zuweisen.

Warum funktioniert Methode 2 nicht?

Nur Push- oder Index-Traversal-Zuweisungen können die Reaktionsfähigkeit des reaktiven Arrays beibehalten?

Wie lässt sich das gesamte Array einfach mit reaktionsfähigen Daten verbinden?

Bietet mehrere Methoden

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

oder

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

oder

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

Diese Methoden können die Reaktionsfähigkeit auslösen. Es wird empfohlen, dass die reaktive Neuzuweisung der ersten

vue3 ungültig ist

vue3 offizielle Dokumentation

reaktiv( ) Gibt einen reaktiven Proxy zurück eines Objekts

Die reaktive Methode sollte also auf ein Objektobjekt einwirken. Wenn Sie ein Array verwenden möchten, müssen Sie es umschließen:

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

oder verwenden Sie ref:

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

Der ursprüngliche Code des Autors ist unten angegeben:🎜

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
    }
  },
}

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Reactive, um Arrays in vue3 zu umschließen und Werte korrekt zuzuweisen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!