Vue-Instanz


Verzeichnis


Erstellen Sie eines Vue-Instanzen

Jede Vue-Anwendung beginnt mit der Erstellung einer neuen Vue-Instanz mit der Vue-Funktion: 

var vm = new Vue({
  // 选项
})

Obwohl diese nicht genau befolgt wird MVVM-Modell, aber auch Vues Design wurde davon inspiriert. Daher wird in Dokumenten häufig der Variablenname vm (Abkürzung für ViewModel) zur Darstellung von Vue-Instanzen verwendet.

Beim Erstellen einer Vue-Instanz können Sie ein Optionsobjekt übergeben. In diesem Tutorial wird beschrieben, wie Sie diese Optionen verwenden, um das gewünschte Verhalten zu erstellen. Als Referenz können Sie auch die vollständige Liste der Optionen in der API-Dokumentation durchsuchen.

Eine Vue-Anwendung besteht aus einer new VueStamm-Vue-Instanz, die über erstellt wurde, und einem optionalen verschachtelten, wiederverwendbaren Komponentenbaum. Der Komponentenbaum einer Todo-Anwendung kann beispielsweise so aussehen: 

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

Wir werden später im Kapitel Komponentensystem ausführlich darauf eingehen. Aber zunächst müssen Sie nur verstehen, dass alle Vue-Komponenten Vue-Instanzen sind und dasselbe Optionsobjekt akzeptieren (mit Ausnahme einiger stamminstanzspezifischer Optionen).


Daten und Methoden

Wenn eine Vue-Instanz erstellt wird, wird sie data Fügen Sie alle Eigenschaften im Objekt zu Vue hinzu Das responsive System. Wenn sich die Werte dieser Eigenschaften ändern, „reagiert“ die Ansicht, indem sie die neuen Werte anpasst. 

// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3

Wenn sich diese Daten ändern, wird die Ansicht neu gerendert. Es ist zu beachten, dass nur Eigenschaften, die bei der Erstellung der Instanz bereits in data vorhanden sind, reaktiv sind. Das heißt, wenn Sie ein neues Attribut hinzufügen, wie zum Beispiel: 

vm.b = 'hi'

, lösen Änderungen an b keine Ansichtsaktualisierungen aus. Wenn Sie wissen, dass Sie eine Eigenschaft später benötigen, diese aber leer ist oder anfangs nicht existiert, müssen Sie nur einen Anfangswert festlegen. Beispiel: 

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

Die einzige Ausnahme hier ist die Verwendung von Object.freeze(), die die Änderung vorhandener Eigenschaften verhindert und bedeutet, dass das Antwortsystem Änderungen nicht mehr verfolgen kann. 

var obj = {
  foo: 'bar'
}
Object.freeze(obj)
new Vue({
  el: '#app',
  data: obj
})
rrree

Zusätzlich zu den Dateneigenschaften stellen Vue-Instanzen auch einige nützliche Instanzeigenschaften und -methoden zur Verfügung. Allen wird $ vorangestellt, um sie von benutzerdefinierten Eigenschaften zu unterscheiden. Zum Beispiel: 

<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

Sie können die vollständige Liste der Instanzeigenschaften und -methoden in Zukunft in der API-Referenz überprüfen.


Instanz-Lebenszyklus-Hooks

Jede Vue-Instanz ist erforderlich, wenn sie danach erstellt wird eine Reihe von Initialisierungsprozessen – Sie müssen beispielsweise die Datenüberwachung einrichten, Vorlagen kompilieren und Instanzen im DOM bereitstellen Und aktualisieren Sie das DOM, wenn sich die Daten ändern usw. Gleichzeitig werden während dieses Prozesses auch einige Funktionen namens Lebenszyklus-Hooks ausgeführt, die Benutzern die Möglichkeit geben, in verschiedenen Phasen ihren eigenen Code hinzuzufügen.

Zum Beispiel können created-Hooks verwendet werden, um Code auszuführen, nachdem eine Instanz erstellt wurde: 

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

Es gibt auch einige andere Hooks, die verwendet werden Während des Instanzlebenszyklus werden verschiedene Phasen aufgerufen, wie z mounted, updated und destroyed. Der this-Kontext eines Lebenszyklus-Hooks verweist auf die Vue-Instanz, die ihn aufgerufen hat.

Verwenden Sie keine Pfeilfunktionen wie created: () => console.log(this.a) oder vm.$watch('a', newValue => this.myMethod()) für Optionsattribute oder Rückrufe. Da die Pfeilfunktion kein this hat, wird this als Variable zum Nachschlagen des oberen lexikalischen Bereichs verwendet, bis es gefunden wird, was häufig zu Fehlern wie Uncaught TypeError: Cannot read property of undefined oder Uncaught TypeError: this.myMethod is not a function führt.


Lebenszyklusdiagramm

Die folgende Abbildung zeigt das Leben des Instanzzyklus. Sie müssen nicht alles sofort verstehen, aber wenn Sie es weiter lernen und verwenden, wird sein Referenzwert immer höher.

1.png