Wenn ich eine Eigenschaft in Vue-Daten zufällig ändere, wird die Ansicht aktualisiert?

neuer Vue({
  el: '#app',
  Daten() {
    zurückkehren {
      ein: 1,
      b: 2,
      c: 3,
      d: 4,
    };
  },
  erstellt() {
    Konsole.log(dies.b);
    dies.b = "aaa";
  },
  Vorlage: '<div>Hallo Welt{{a}}{{b}}</div>',
});

const keys = Objekt.keys(Daten)
  const props = vm.$options.props
  const-Methoden = vm.$options.methods
  sei i = Schlüssel.Länge
  während (i--) {
    const Schlüssel = Schlüssel[i]
    wenn (Requisiten und hasOwn (Requisiten, Schlüssel)) {
      process.env.NODE_ENV !== 'Produktion' && warn(
        `Die Dateneigenschaft "${key}" ist bereits als Prop deklariert. ` +
        `Verwenden Sie stattdessen den Standardwert der Eigenschaft.`,
        vm
      )
    } sonst wenn (!isReserved(Schlüssel)) {
      //Eigenschaften des Proxy-Objekts proxy(vm, `_data`, key)
    }
  }
  // Daten beobachten
  beobachte(Daten, wahr /* alsRootData */)

beobachten(Daten, wahr /* asRootData */);

// beobachten
const keys = Objekt.keys(obj);
für (lass i = 0; i < Schlüssel.Länge; i++) {
  definiereReaktiv(Objekt, Schlüssel[i]);
}

// definiereReaktiv
Objekt.defineProperty(Objekt, Schlüssel, {
  aufzählbar: wahr,
  konfigurierbar: true,
  erhalten: Funktion reactiveGetter() {
    const Wert = Getter? getter.call(Obj) : Wert;
    // Der springende Punkt ist hier. Wenn die Attribute später in der Vorlage verwendet werden, wird die Funktion reactiveGetter ausgeführt // Wird von der Dep-Klasse gesammelt if (Dep.target) {
      console.log(`${key}-Eigenschaft wird von der Dep-Klasse erfasst`)
      dep.abhängig();
      wenn (KindOb) {
        childOb.dep.depend();
        wenn (Array.isArray(Wert)) {
          abhängigArray(Wert);
        }
      }
    }
    Rückgabewert;
  },
  set: Funktion reactiveSetter(newVal) {
    const Wert = Getter? getter.call(Obj) : Wert;
    /* eslint-deaktiviert keinen Selbstvergleich */
    wenn (neuerWert === Wert || (neuerWert !== neuerWert && Wert !== Wert)) {
      zurückkehren;
    }
    wenn (Setter) {
      // Hier ist die berechnete Menge der Funktion setter.call(obj, newVal);
    } anders {
      val = neuerWert;
    }
    childOb = !shallow und beobachten (neuer Wert);
    // Wenn wir die Eigenschaft ändern, rufen wir „notify“ auf, um die Ansicht asynchron zu aktualisieren dep.notify();
  },
});

wenn (vm.$options.el) {
  vm.$mount(vm.$options.el);
}

Vue.prototype.$mount = Funktion (
  el?: Zeichenfolge | Element,
  hydratisierend?: Boolesch
): Komponente {
  el = el && Abfrage(el);

  const Optionen = diese.$Optionen;
  // Vorlage/EL auflösen und in Renderfunktion umwandeln
  /**
   * Prüfen, ob die Renderfunktion vorhanden ist? Wenn es nicht existiert, analysieren Sie die Vorlage template* Wenn Vue eine Seite rendert, gibt es zwei Möglichkeiten: 1. Vorlage, 2. Rendern. Letztendlich müssen alle Vorlagenklassen mit render*/ gerendert werden.
  wenn (!optionen.render) {
    let Vorlage = Optionen.Vorlage;
    wenn (Vorlage) {
      wenn (Typ der Vorlage === 'Zeichenfolge') {
        wenn (template.charAt(0) === '#') {
          Vorlage = idToTemplate(Vorlage);
          /* istanbul ignorieren wenn */
          wenn (Prozess.env.NODE_ENV !== 'Produktion' && !Vorlage) {
            warnen(
              `Vorlagenelement nicht gefunden oder leer: ${options.template}`,
              Das
            );
          }
        }
      } sonst wenn (Vorlage.Knotentyp) {
        Vorlage = Vorlage.innerHTML;
      } anders {
        wenn (Prozess.Umgebung.NODE_ENV !== 'Produktion') {
          warnen('ungültige Vorlagenoption:' + Vorlage, diese);
        }
        gib dies zurück;
      }
    } sonst wenn (el) {
      // Wenn die Vorlage nicht existiert, erstellen Sie eine Standard-HTML-Vorlage. Vorlage = getOuterHTML(el);
    }
  }
  // Vue.prototype.$mount neu schreiben und abschließend die zwischengespeicherte Mount-Methode aufrufen, um das Mounten von $mount abzuschließen return mount.call(this, el, hydrating);
};

const { render, _parentVnode } = vm.$optionen;
vnode = render.call(vm._renderProxy, vm.$createElement);