Lösung für Vues Unfähigkeit, Array-Änderungen zu beobachten

1. Vue-Listener-Array

Vue kann Array-Änderungen überwachen, wie zum Beispiel

Daten () {
  zurückkehren {
    UhrArr: [],
  };
},
watchArr (neuerWert) {
  console.log('Listening: ' + newVal);
},
erstellt () {
  setzeTimeout(() => {
    dies.watchArr = [1, 2, 3];
  }, 1000);
},

Verwenden Sie beispielsweise splice(0,2,3), um zwei Elemente aus dem Array-Index 0 zu löschen und ein Element 3 am Index 0 einzufügen.

Daten () {
  zurückkehren {
    UhrArr: [1, 2, 3],
  };
},
watchArr (neuerWert) {
  console.log('Listening: ' + newVal);
},
erstellt () {
  setzeTimeout(() => {
    dies.watchArr.splice(0, 2, 3);
  }, 1000);
},

Auch das Push-Array kann überwacht werden.

2. Situationen, in denen Vue Array-Änderungen nicht überwachen kann

Allerdings können Arrays in den folgenden beiden Situationen nicht überwacht werden

• Wenn Sie ein Array-Element direkt über einen Index festlegen, zum Beispiel arr[indexofitem]=newValue
• Beim Ändern der Länge eines Arrays, zum Beispiel arr.length = newLength

Beispiel für eine Situation, in der Array-Änderungen nicht überwacht werden können

1. Verwenden Sie Indizes, um Array-Werte direkt zu ändern

Daten () {
  zurückkehren {
    UhrArr: [{
      Name: 'krry',
    }],
  };
},
watchArr (neuerWert) {
  console.log('Listening: ' + newVal);
},
erstellt () {
  setzeTimeout(() => {
    this.watchArr[0].name = "xiaoyue";
  }, 1000);
},

2. Ändern Sie die Länge des Arrays

• Wenn die Länge größer als das ursprüngliche Array ist, werden die nachfolgenden Elemente auf undefiniert gesetzt
• Wenn die Länge kürzer als das ursprüngliche Array ist, werden die zusätzlichen Elemente abgeschnitten.

Daten () {
  zurückkehren {
    UhrArr: [{
      Name: 'krry',
    }],
  };
},
watchArr (neuerWert) {
  console.log('Listening: ' + newVal);
},
erstellt () {
  setzeTimeout(() => {
    diese.watchArr.length = 5;
  }, 1000);
},

Dies ist das Ende dieses Artikels darüber, dass Vue keine Array-Änderungen beobachten kann. Weitere verwandte Inhalte darüber, dass Vue keine Array-Änderungen beobachten kann, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!