So verwenden Sie watch in Vue, um Änderungen in einem Array zu überwachen

So verwenden Sie watch in Vue, um Änderungen in Arrays zu überwachen

Vue ist eines der am häufigsten verwendeten Frameworks in der Front-End-Entwicklung. Es bietet viele praktische Möglichkeiten, Funktionen wie Datenreaktionsfähigkeit, Vorlagenrendering und Komponentisierung zu implementieren. In Vue verwenden wir häufig Watch, um Datenänderungen zu überwachen. Wenn wir jedoch Array-Änderungen überwachen müssen, müssen wir auf einige Details achten.

In Vue können wir watch verwenden, um Änderungen in einer einzelnen Eigenschaft oder einem einzelnen Objekt zu überwachen. Die grundlegende Verwendung ist wie folgt:

watch: {
  // 监听对象属性
  obj: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  },
  // 监听单个属性
  prop: function (newVal, oldVal) {
    // ...
  }
}

Wenn wir Änderungen in einem Array überwachen möchten, müssen wir auf die folgenden Punkte achten:

1. Verwenden Sie die vm.$watch-Methode

Vue stellt die vm.$watch-Methode zur Überwachung von Datenänderungen bereit. Diese Methode gibt eine Funktion zum Abbrechen der Überwachung zurück. Die VM bezieht sich hier auf die Instanz von Vue. Bei Arrays können wir diese Methode verwenden, um Änderungen im Array zu überwachen. Die grundlegende Verwendung ist wie folgt:

vm.$watch('arr', function (newVal, oldVal) {
  // ...
}, {
  deep: true
})

Der arr ist hier das Array, das wir überwachen müssen. newVal und oldVal in der Handler-Rückruffunktion repräsentieren den überwachten neuen Wert bzw. den alten Wert. Da außerdem in der Regel jedes Element im Array ein Objekt ist, müssen Sie „deep“ auf „true“ setzen, um eine umfassende Überwachung zu erreichen.

Es ist zu beachten, dass Vue das mit der vm.$watch-Methode überwachte Array nicht automatisch kapert. Daher müssen wir das Array manuell kapern, um Änderungen im Array zu überwachen.

2. Überwachen Sie jedes Element im Array

Wenn wir Änderungen in jedem Element im Array überwachen müssen, können wir die Direkt- und Handler-Parameter in der vm.$watch-Methode verwenden. Der Code lautet wie folgt:

arr.forEach(function (item, index) {
  vm.$watch(
    function () {
      return arr[index];
    },
    {
      immediate: true,
      deep: true,
      handler: function (newVal, oldVal) {
        // ...
      }
    }
  );
});

unmittelbar hier ist true , was bedeutet, dass die Rückruffunktion beim Abhören einmal ausgeführt wird. Es ist zu beachten, dass der obige Code nicht das gesamte Array kapert, sondern jedes Element einzeln überwacht.

3. Berechnete Eigenschaften verwenden

Die berechneten Eigenschaften in Vue können neue Daten basierend auf vorhandenen Daten berechnen, sodass wir berechnete Eigenschaften verwenden können, um Änderungen im Array zu überwachen. Seine grundlegende Verwendung ist wie folgt:

computed: {
  // 监听arr数组
  arrWatcher: function () {
    this.arr; // 调用一次arr，以实现依赖收集
    return this.arr;
  }
},
watch: {
  // 监听计算属性
  arrWatcher: {
    handler: function (newVal, oldVal) {
      // ...
    },
    deep: true
  }
}

Der arrWatcher hier ist die berechnete Eigenschaft, die wir definiert haben, und der Rückgabewert dieser berechneten Eigenschaft ist das überwachte Array. Beobachten Sie einfach die Änderungen der berechneten Eigenschaft im Auge. Da berechnete Eigenschaften automatisch Abhängigkeiten erfassen, werden die berechneten Eigenschaften automatisch aktualisiert, wenn sich das Array ändert, wodurch die Watch-Callback-Funktion ausgelöst wird.

Wenn Sie berechnete Eigenschaften zur Überwachung von Array-Änderungen verwenden, müssen Sie eines beachten: Wenn wir nur Änderungen in der Länge des Arrays überwachen müssen und uns nicht um Änderungen an den Elementen im Array kümmern, können wir dies einfach tun Verwenden Sie berechnete Eigenschaften, um dies zu erreichen. Wenn Sie jedoch Änderungen an Elementen im Array überwachen müssen, müssen Sie auch jedes Element im Array kapern und außerdem die Methode vm.$watch verwenden.

Zusammenfassend lässt sich sagen, dass wir die Methode vm.$watch verwenden, jedes Element im Array überwachen und berechnete Eigenschaften verwenden können, um Änderungen im Array in Vue zu überwachen. Es ist wichtig zu beachten, dass bei Verwendung dieser Methoden das Array gekapert werden sollte, um sicherzustellen, dass Vue Änderungen im Array korrekt überwachen kann.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie watch in Vue, um Änderungen in einem Array zu überwachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!