So verwenden Sie Vue.set, um responsive Daten in Vue zu implementieren

Vue bietet eine sehr praktische Möglichkeit zum Aktualisieren reaktionsfähiger Daten, nämlich die Verwendung der Vue.set-Methode. In diesem Artikel wird die Verwendung der Vue.set-Methode und der zugehörigen Wissenspunkte vorgestellt.

1. Einführung in die Vue.set-Methode

Die Vue.set-Methode ist eine von Vue bereitgestellte globale API, die verwendet wird, um einem responsiven Objekt eine Eigenschaft hinzuzufügen und sicherzustellen, dass die neue Eigenschaft responsiv ist. In Vue verwenden wir normalerweise Objekte und Arrays als Datenquellen für Komponenten. Diese Datenquellen werden normalerweise vom reaktionsfähigen System von Vue beobachtet und unterstützen die Überwachung. In einigen Fällen müssen wir jedoch ein neues Attribut oder Element zum Objekt oder Array hinzufügen. Wenn die Vue.set-Methode zu diesem Zeitpunkt nicht verwendet wird, wird das hinzugefügte neue Attribut oder Element nicht vom reagierenden System überwacht in Einige Fragen.

2. Verwendung der Vue.set-Methode

Die Vue.set-Methode ist eine globale API, sodass wir sie direkt in der Komponente verwenden können. So wird die Vue.set-Methode aufgerufen:

Vue.set(obj, key, value)

wobei obj das zu bearbeitende Objekt darstellt, key den hinzuzufügenden Attributnamen und value das Attribut darstellt Wert, der hinzugefügt werden soll.

Wir können die Verwendung von Vue.set durch den folgenden Code demonstrieren:

<template>
  <div>
    <p>{{ userInfo.name }}</p>
    <p>{{ userInfo.age }}</p>
    <button @click="addData">添加数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        age: 18
      }
    }
  },
  methods: {
    addData() {
      Vue.set(this.userInfo, 'phone', '123456789') // 添加响应式属性
    }
  }
}
</script>

Im obigen Code haben wir dem userInfo-Objekt ein neues Eigenschaftstelefon hinzugefügt und die Vue.set-Methode verwendet, um sicherzustellen, dass es reagiert. Wenn wir auf die Schaltfläche klicken, wird dem userInfo-Objekt ein Attribut namens phone mit dem Wert „123456789“ hinzugefügt. Das Ergebnis können wir in der Vorlage anzeigen. Zu diesem Zeitpunkt kann der Add-Vorgang mit Vue.set nicht nur die Antwort in nachfolgenden Aktualisierungen abrufen, sondern auch alle Datenbindungsaktualisierungen für das Objekt auslösen.

3. Prinzipanalyse von Vue.set

Das Implementierungsprinzip von Vue.set ist nicht kompliziert und wird hauptsächlich durch Aufrufen des reaktionsfähigen Systems von Vue implementiert. Für die Objektadditionsoperation ist die Implementierung von Vue.set wie folgt:

Vue.set = function (obj, key, value) {
  // 判断obj是否是响应式的对象
  if (hasOwn(obj, key)) {
    obj[key] = value
    return
  }
  // 获取当前的观察者
  const ob = obj.__ob__
  // 非响应式对象，直接赋值
  if (!ob) {
    obj[key] = value
    return
  }
  // 将新增属性的值变为响应式的
  defineReactive(ob.value, key, value)
  ob.dep.notify()
}

Zuerst bestimmt die Vue.set-Methode über die hasOwn-Methode von Vue, ob obj ein reaktionsfähiges Objekt ist. Wenn ja, weisen Sie dem Objekt direkt einen Wert zu. Wenn nicht, ruft es den Beobachter ob von obj ab, ruft dann die Methode defineReactive auf, um die neue Eigenschaft reaktionsfähig zu machen, und ruft die Methode ob.dep.notify auf, um die zu aktualisierende Komponente zu benachrichtigen.

Für die Additionsoperation des Arrays lautet die Implementierung von Vue.set wie folgt:

Vue.set = function (target, key, val) {
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (hasOwn(target, key)) {
    target[key] = val
    return val
  }
  const ob = target.__ob__
  if (!ob) {
    target[key] = val
    return val
  }
  ob.convert(key, val)
  ob.dep.notify()
  return val
}

Wir können sehen, dass Vue.set für die Additionsoperation des Arrays hauptsächlich mit der Spleißmethode implementiert wird. Gleichzeitig können wir für Array-Operationen auch Vue.set verwenden, um sicherzustellen, dass die hinzugefügten Elemente reagieren.

4. Zusammenfassung

In diesem Artikel werden hauptsächlich die Verwendungs- und Implementierungsprinzipien der Vue.set-Methode vorgestellt. Die Vue.set-Methode ist eine sehr praktische Möglichkeit, reaktionsfähige Datenaktualisierungen zu implementieren. Unabhängig davon, ob Elemente zu einem Objekt oder einem Array hinzugefügt werden, können wir mit der Vue.set-Methode sicherstellen, dass diese neuen Elemente reagieren, und so einige Probleme bei der Datenaktualisierung mit Reaktionsfähigkeit lösen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue.set, um responsive Daten in Vue zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!