Was ist der Grund, warum Vue das Objekt nicht abhören kann?

Vorwort

In der Vue.js-Entwicklung wird häufig die bidirektionale Datenbindung verwendet, was eine der Kernfunktionen von Vue.js ist. Manchmal stellen Sie jedoch fest, dass Vue die Eigenschaftsänderung nicht erkennt, wenn Sie ein Objekt auf einer Vue-Instanz erstellen und dem Objekt dann eine neue Eigenschaft hinzufügen. In diesem Artikel wird dieses Problem im Detail untersucht.

In diesem Artikel werden die folgenden Fragen untersucht:

1. Unter welchen Umständen kann ein Vue-Objekt auf Eigenschaftsänderungen hören?
2. Unter welchen Umständen kann Vue Änderungen an Objekten nicht erkennen?
3. Wie löst Vue das Problem, nicht auf Objekte hören zu können?

Unter welchen Umständen kann ein Vue-Objekt Eigenschaftsänderungen erkennen?

In Vue.js sind nur Eigenschaften reaktiv, die beim Instanziieren eines Vue-Objekts definiert werden. Zum Beispiel:

var vm = new Vue({
  data: {
    message: 'Hello world'
  }
});

// 改变message属性，view会自动更新
vm.message = 'Changed message';

Wenn wir in der Vue-Instanz von Anfang an einen komplexen Datentyp wie Objekt oder Array definieren, werden die Eigenschaften im Objekt oder die Elemente im Array automatisch zu reaktiven Eigenschaften.

Zum Beispiel:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    },
    arr: [1, 2, 3, 4, 5]
  }
});

// 对象的属性变化可以被侦听到
vm.obj.message = 'Changed message';

//数组的项目变化可以被侦听到
vm.arr.push(6);

Da Vue.js die Methode Object.defineProperty() auf der Vue-Instanz verwendet, um die Eigenschaften im Objekt in Getter/Setter umzuwandeln, können Änderungen an den Objekteigenschaften erkannt werden.

Unter welchen Umständen kann Vue Änderungen an Objekten nicht erkennen?

Oben haben wir erwähnt, dass bei der Definition eines komplexen Datentyps in einer Vue-Instanz die Eigenschaften im Objekt oder die Elemente im Array automatisch zu reaktiven Eigenschaften werden. Wenn Sie einem Objekt jedoch eine neue Eigenschaft hinzufügen, kann Vue nicht auf Änderungen in dieser Eigenschaft hören.

Zum Beispiel:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 新添加属性，无法被侦听到
vm.obj.newProp = 'new value';

//改变新添加属性，仍然无法被侦听到
vm.obj.newProp = 'changed value';

Vue kann nicht auf Änderungen in neu hinzugefügten Eigenschaften hören, da Vue.js beim Instanziieren des Vue-Objekts nur auf bereits definierte Eigenschaften lauscht, nicht auf später hinzugefügte Eigenschaften. Das heißt, wenn Sie zur Laufzeit eine neue Eigenschaft hinzufügen, müssen Sie die Methode Vue.set() verwenden, um eine neue Eigenschaft hinzuzufügen und sie reaktiv zu machen. Zum Beispiel:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world'
    }
  }
});

// 使用Vue.set()方法来添加新属性
Vue.set(vm.obj, 'newProp', 'new value');

//新属性可以被侦听到
vm.obj.newProp = 'changed value';

Wie löst Vue das Problem, nicht auf Objekte hören zu können?

Neben der Verwendung der Vue.set()-Methode, um eine neue Eigenschaft hinzuzufügen und sie reaktiv zu machen, gibt es noch andere Möglichkeiten, das Problem zu lösen, dass Objekte nicht abgehört werden können.

1. Definieren Sie alle Eigenschaften in der Vue-Instanziierung.

Der beste Weg, das Hinzufügen neuer Eigenschaften nach dem Erstellen der Vue-Instanz zu vermeiden, besteht darin, alle Eigenschaften in der Vue-Instanziierung zu definieren. Zum Beispiel:

var vm = new Vue({
  data: {
    obj: {
      message: 'Hello world',
      newProp: ''
    }
  }
});

//新属性现在侦听到了
vm.obj.newProp = 'new value';

2. Verwenden Sie die Vue.observable()-Methode

Die Vue.observable()-Methode verwendet das zu reagierende Objekt als Parameter und gibt ein Objekt mit reaktionsfähiger Funktionalität zurück. (Beachten Sie, dass diese Methode in der Vue-Version 2.6.0 neu ist.) Zum Beispiel:

import Vue from 'vue';

var obj = {
  message: 'Hello world'
};
//使用Vue.observable()方法
var observableObj = Vue.observable(obj);

//新属性现在侦听到了
observableObj.newProp = 'new value';

Fazit

Bei der Entwicklung von Vue.js ist die bidirektionale Datenbindungsfunktion sehr wichtig. Bei der Verwendung von Vue-Objekten müssen Sie jedoch die folgenden Punkte beachten:

1. Nur Eigenschaften, die beim Instanziieren eines Vue-Objekts definiert werden, sind reaktiv.
2. Wenn Sie einem Objekt eine neue Eigenschaft hinzufügen, kann Vue nicht auf Änderungen in der Eigenschaft hören.
3. Wenn Sie eine neue Eigenschaft hinzufügen und sie responsiv machen müssen, verwenden Sie die Methode Vue.set().
4. Neuere Versionen von Vue, wie z. B. Vue 2.6.0, können die Methode Vue.observable() verwenden, um ein Objekt in ein reaktives Objekt umzuwandeln.

Wenn Sie responsive Attribute richtig verwenden können, bietet Ihnen Vue.js einfachen und kompakten Code, eine intuitive Benutzeroberfläche und eine bessere Benutzererfahrung.

Das obige ist der detaillierte Inhalt vonWas ist der Grund, warum Vue das Objekt nicht abhören kann?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!