Ein einfaches Verständnis des Vue-Beobachtungsmodus

Dieser Artikel vermittelt Ihnen ein einfaches Verständnis des Vue-Beobachtungsmodus. Freunde in Not können sich darauf beziehen.

Das Folgende ist mein Verständnis des Vue-Beobachtermusters:

Seien Sie nicht voreingenommen gegenüber dem Framework, Sie verstehen es wirklich jquery, Angular, React usw. Frameworks sind nur Werkzeuge.
Haben Sie jemals die Trigger-, Ein-, Aus-Ereignisbindungsmethoden von jquery verwendet? Tatsächlich befindet sich Vue auch in diesem Modus, außer dass Vue automatisch die On-Methode aufruft und den Trigger automatisch auslöst. Sie können das Abhören und Auslösen von Ereignissen sogar ohne JQuery implementieren. Tatsächlich ist die letzte Erklärung der Rückruf (Grundprinzip) eines bestimmten Ereignisses.
Das Folgende ist ein Screenshot des Quellcodeverzeichnisses:

1... Wenn die Vue-Instanz initialisiert wird, wird sie angezeigt wird in dem von der Datenfunktion zurückgegebenen Objekt enthalten sein. Die folgende Methode wird für das Attribut aufgerufen. Führen Sie die durch exporFn dargestellte Methode aus. Diese Methode umfasst im Wesentlichen den Aufruf der Getter-Methode in 1...

(denken Sie an die Vorgänge im Render-Hook, zu denen im Wesentlichen das Abrufen des Werts in den Attributdaten der Vue-Instanz oder das Abrufen des Werts des berechneten Attributs von gehört die Vue-Instanz).

 // 这个是 vue 绑定自动绑定事件的方法和触发事件方法, 会把data函数返回的对象变量属性，重写对应属性的 赋值 和获取的操作。具体查看 （mdn  Object.defineProperty api）
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // watcher 对象， 如果存在
      if (Dep.target) {
        // 把Watcher 实例 推入 Dep 实例的 subs 数组里， 这个就相当于 on
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      // 通知 Dep 实例 中subs 里数组 中所有 Watcher 实例, 然后调用Watcher实例里的 update方法(), 这个就相当于 trigger。
      dep.notify()
    }
  })

Die Renderfunktion wird also mit dem Datenattribut und dem Beobachtungsattribut der Vue-Instanz verbunden, was eine geschlossene Schleife bildet. Wenn sich die darin enthaltenen Eigenschaften ändern, wird die Setter-Methode automatisch aufgerufen und die dep.notify-Methode ausgelöst, die wiederum die Watcher-Instanz in dep.subs dazu veranlasst, die Update-Methode aufzurufen und dann zu aktualisieren.

(Ich weiß nicht, wie ich diesen Teil des Codes sagen soll, deshalb habe ich ihn nicht geschrieben. Bitte überprüfen Sie den Quellcode für Details)

Das obige ist der detaillierte Inhalt vonEin einfaches Verständnis des Vue-Beobachtungsmodus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!