Der Quellcode zeigt, warum Vue2 Daten und Methoden direkt abrufen kann

const vm = neuer Vue({
    Daten: {
        Name: "Ich bin Ruochuan",
    },
    Methoden: {
        sagName(){
            konsole.log(dieser.name);
        }
    },
});
console.log(vm.name); // Ich bin Ruochuanconsole.log(vm.sayName()); // Ich bin Ruochuan

Funktion Person(Optionen){

}

const p = neue Person({
    Daten: {
        Name: „Kleinanzeigen“
    },
    Methoden: {
        sagName(){
            konsole.log(dieser.name);
        }
    }
});

Konsole.log(p.name);
// undefiniert
console.log(p.sayName());
// Nicht abgefangener TypeError: p.sayName ist keine Funktion

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<Skript>
    const vm = neuer Vue({
        Daten: {
            Name: "Ich bin Ruochuan",
        },
        Methoden: {
            sagName(){
                konsole.log(dieser.name);
            }
        },
    });
    Konsole.log(VM-Name);
    Konsole.log(vm.sayName());
</Skript>

npm i -g http-server
CD-Beispiele
http-Server.
// Falls der Port belegt ist, können Sie den Port auch http-server -p 8081 angeben.

Funktion Vue (Optionen) {
    wenn (!(diese Instanz von Vue)
    ) {
        warnen('Vue ist ein Konstruktor und sollte mit dem Schlüsselwort ‚new‘ aufgerufen werden');
    }
    this._init(Optionen);
}
// Initialisieren initMixin(Vue);
Zustandsmixin(Vue);
EreignisseMixin(Vue);
LebenszyklusMixin(Vue);
: renderMixin(Vue);

jQuery = Funktion (Selektor, Kontext) {
  //Gibt das neue Objekt zurück return new jQuery.fn.init( selector, context );
};

// Code wurde gelöscht Funktion initMixin (Vue) {
    Vue.prototype._init = Funktion (Optionen) {
      var vm = dies;
      // eine UID
      vm._uid = uid$3++;

      // ein Flag, um zu verhindern, dass dies beobachtet wird
      vm._isVue = true;
      // Merge-Optionen
      if (Optionen && Optionen._istKomponente) {
        // Instanziierung interner Komponenten optimieren
        // da das Zusammenführen dynamischer Optionen ziemlich langsam ist und keine der
        // Interne Komponentenoptionen erfordern eine besondere Behandlung.
        initInternalComponent(vm, Optionen);
      } anders {
        vm.$optionen = mergeOptionen(
          Konstruktoroptionen auflösen(vm.constructor),
          Optionen || {},
          vm
        );
      }

      // wahres Ich enthüllen
      vm._self = vm;
      initLifecycle(vm);
      : InitEvents(vm);
      initRender(vm);
      callHook(vm, 'vorErstellen');
      initInjections(vm); // Injektionen vor Daten/Eigenschaften auflösen
      // Initialisierungsstatus initState(vm);
      initProvide(vm); // provide nach data/props auflösen
      callHook(vm, 'erstellt');
    };
}

Funktion initState (vm) {
    vm._watchers = [];
    var opts = vm.$optionen;
    wenn (opts.props) { initProps(vm, opts.props); }
    // Es wurden Methoden übergeben, Initialisierungsmethode if (opts.methods) { initMethods(vm, opts.methods); }
    //Daten eingeben, Daten initialisieren
    wenn (opts.data) {
      initData(vm);
    } anders {
      beobachten(vm._data = {}, true /* asRootData */);
    }
    wenn (opts.computed) { initComputed(vm, opts.computed); }
    wenn (opts.watch && opts.watch !== nativeWatch) {
      initWatch(vm, opts.watch);
    }
}

Funktion initMethods (vm, Methoden) {
    var props = vm.$options.props;
    für (var Schlüssel in Methoden) {
      {
        if (Typ der Methoden[Schlüssel] !== 'Funktion') {
          warnen(
            "Methode \"" + Schlüssel + "\" hat den Typ \"" + (Typ der Methoden[Schlüssel]) + "\" in der Komponentendefinition. " +
            "Haben Sie die Funktion richtig referenziert?",
            vm
          );
        }
        wenn (Requisiten und hasOwn (Requisiten, Schlüssel)) {
          warnen(
            ("Methode \"" + Taste + "\" wurde bereits als Eigenschaft definiert."),
            vm
          );
        }
        if ((Schlüssel in vm) && isReserved(Schlüssel)) {
          warnen(
            "Methode \"" + Schlüssel + "\" steht im Konflikt mit einer vorhandenen Vue-Instanzmethode. " +
            „Vermeiden Sie die Definition von Komponentenmethoden, die mit _ oder $ beginnen.“
          );
        }
      }
      vm[Schlüssel] = Typ der Methoden[Schlüssel] !== 'Funktion' ? noop : binden(Methoden[Schlüssel], vm);
    }
}

Funktion polyfillBind (fn, ctx) {
    Funktion boundFn (a) {
      var l = Argumente.Länge;
      Rückkehr l
        ? l > 1
          ? fn.apply(ctx, Argumente)
          : fn.call(ctx, a)
        : fn.aufruf(ctx)
    }

    boundFn._length = fn.länge;
    Rückgabewert boundFn
}

Funktion nativeBind (fn, ctx) {
  gibt fn.bind(ctx) zurück
}

var bind = Funktion.prototype.bind
  ? nativeBind
  :polyfillBind;

Funktion initData (vm) {
    var Daten = vm.$Optionen.Daten;
    Daten = vm._Daten = Datentyp === 'Funktion'
      ? getData(Daten, vm)
      : Daten || {};
    wenn (!isPlainObject(data)) {
      Daten = {};
      warnen(
        'Datenfunktionen sollten ein Objekt zurückgeben:\n' +
        „https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function“,
        vm
      );
    }
    // Proxy-Daten auf der Instanz
    var keys = Objekt.keys(Daten);
    var props = vm.$options.props;
    var Methoden = vm.$options.methods;
    var i = Schlüssel.Länge;
    während (i--) {
      var Schlüssel = Schlüssel[i];
      {
        if (Methoden && hasOwn(Methoden, Schlüssel)) {
          warnen(
            ("Methode \"" + Schlüssel + "\" wurde bereits als Dateneigenschaft definiert."),
            vm
          );
        }
      }
      wenn (Requisiten und hasOwn (Requisiten, Schlüssel)) {
        warnen(
          "Die Dateneigenschaft \"" + Schlüssel + "\" ist bereits als Prop deklariert. " +
          "Stattdessen den Standardwert der Eigenschaft verwenden.",
          vm
        );
      } sonst wenn (!isReserved(Schlüssel)) {
        Proxy (vm, "_data", Schlüssel);
      }
    }
    // Daten beobachten
    beobachten(Daten, wahr /* asRootData */);
}

Funktion getData (Daten, vm) {
    // #7573 Deaktivierung der Dep-Sammlung beim Aufrufen von Datengettern
    Ziel drücken();
    versuchen {
      gibt Daten zurück.Aufruf(vm, vm)
    } fangen (e) {
      Fehlerbehandlung(e, vm, "data()");
      zurückkehren {}
    Endlich
      popZiel();
    }
}

/**
   * Führen Sie keine Operation aus.
   * Stubbing von Argumenten, um Flow zufriedenzustellen, ohne nutzlosen transpilierten Code zu hinterlassen
   * mit ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).
   */
Funktion noop (a, b, c) {}
var sharedPropertyDefinition = {
    aufzählbar: wahr,
    konfigurierbar: true,
    bekomme: noop,
    gesetzt: noop
};

Funktion Proxy (Ziel, Quellschlüssel, Schlüssel) {
    sharedPropertyDefinition.get = Funktion ProxyGetter () {
      gib dies zurück[sourceKey][key]
    };
    sharedPropertyDefinition.set = Funktion ProxySetter (Wert) {
      dies[Quellschlüssel][Schlüssel] = Wert;
    };
    Object.defineProperty(Ziel, Schlüssel, gemeinsam genutztePropertyDefinition);
}

Drücken Sie im Debugmodus die Alt-Taste und bewegen Sie die Maus über den Methodennamen, um zu sehen, wo die Funktion definiert ist. Klicken Sie, um zu springen.
/**
   * Prüfen, ob ein Objekt die Eigenschaft besitzt.
   */
var hasOwnProperty = Object.prototype.hasOwnProperty;
Funktion hasOwn (Objekt, Schlüssel) {
  returniere hasOwnProperty.call(Objekt, Schlüssel)
}

hasOwn({ a: undefiniert }, 'a') // wahr
hasOwn({}, 'a') // falsch
hasOwn({}, 'hasOwnProperty') // falsch
hasOwn({}, 'toString') // falsch
// Es ist eine Eigenschaft der Eigenschaft selbst und wird nicht nach oben durch die Prototypenkette gesucht.

/**
   * Prüfen Sie, ob eine Zeichenfolge mit $ oder _ beginnt
   */
Funktion ist reserviert (str) {
  var c = (str + '').charCodeAt(0);
  Rückgabe c === 0x24 || c === 0x5F
}
istReserviert('_data'); // wahr
istReserviert('$optionen'); // wahr
isReserved('data'); // falsch
isReserved('Optionen'); // falsch

Funktion noop (a, b, c) {}
var sharedPropertyDefinition = {
    aufzählbar: wahr,
    konfigurierbar: true,
    bekomme: noop,
    gesetzt: noop
};
Funktion Proxy (Ziel, Quellschlüssel, Schlüssel) {
    sharedPropertyDefinition.get = Funktion ProxyGetter () {
      gib dies zurück[sourceKey][key]
    };
    sharedPropertyDefinition.set = Funktion ProxySetter (Wert) {
      dies[Quellschlüssel][Schlüssel] = Wert;
    };
    Object.defineProperty(Ziel, Schlüssel, gemeinsam genutztePropertyDefinition);
}
Funktion initData(vm){
  const data = vm._data = vm.$options.data;
  const keys = Objekt.keys(Daten);
  var i = Schlüssel.Länge;
  während (i--) {
    var Schlüssel = Schlüssel[i];
    Proxy (vm, „_data“, Schlüssel);
  }
}
Funktion initMethods(vm, Methoden){
  für (var Schlüssel in Methoden) {
    vm[Schlüssel] = Typ der Methoden[Schlüssel] !== 'Funktion' ? noop : Methoden[Schlüssel].bind(vm);
  } 
}

Funktion Person(Optionen){
  lass vm = dies;
  vm.$options = Optionen;
  var opts = vm.$optionen;
  wenn(opts.data){
    initData(vm);
  }
  wenn(opts.methods){
    initMethods(vm, opts.methods)
  }
}

const p = neue Person({
    Daten: {
        Name: „Kleinanzeigen“
    },
    Methoden: {
        sagName(){
            konsole.log(dieser.name);
        }
    }
});

Konsole.log(p.name);
// Vor der Implementierung: undefiniert
// 'Kleinanzeigen'
console.log(p.sayName());
// Vor der Implementierung: Nicht abgefangener TypeError: p.sayName ist keine Funktion
// 'Kleinanzeigen'