Vergleich der Unterschiede zwischen den Erweiterungs- und Trennzeichenoptionen in Vue.js

In diesem Artikel werden hauptsächlich relevante Informationen zum Vergleich zwischen der Erweiterungsoption und der Trennzeichenoption in Vue.js vorgestellt. Freunde, die sie benötigen, können sich auf

Vergleich der Erweiterungsoption und der Trennzeichen beziehen Option in Vue.js

Extend-Option

ermöglicht die Deklaration einer Erweiterung einer anderen Komponente (kann ein einfaches Optionsobjekt oder Konstruktor sein), ohne Vue.extend zu verwenden Dies dient hauptsächlich dazu, die Erweiterung einzelner Dateikomponenten zu erleichtern, die Mixins ähneln.

<p id="app">
  {{num}}
  <button @click="add">addNumber</button>
</p>
<script type="text/javascript">
  var extendsObj = {
    updated: function() {
      console.log("extend updated");
    }
  };
  new Vue({
    el: "#app",
    data: {
      num : 1
    },
    methods : {
      add : function() {
        console.log("原生 add");
        this.num++;
      }
    },
    updated : function(){
      console.log(&#39;原生updated&#39;);
    },
    extends : extendsObj,
  });
</script>

Der obige Code wird durch Aktualisierung erweitert, und die Ausführungsergebnisse sind wie folgt folgt:

Es ist ersichtlich, dass das erweiterte Update zuerst ausgeführt wird. Wenn wir uns also die erweiterten Methoden unten ansehen, unterscheiden sich nur die folgenden Teile

 var extendsObj = {
    updated: function() {
      console.log("extend updated");
    },
    methods : {
      add : function() {
        console.log("extend add");
      }
    }
  };

Das Ausführungsergebnis entspricht tatsächlich dem Bild oben. Das heißt, wenn bei Methoden eine Funktion mit demselben Namen angetroffen wird, handelt es sich um eine nicht erweiterte Funktion Wenn eine Funktion mit einem nicht benannten Namen erweitert wird, erfolgt die Ausführung nach der Erweiterung

Trennzeichenoption

Die Standardart zum Schreiben der Interpolation ist { {}}, aber in einigen Fällen müssen wir andere Methoden verwenden, wie zum Beispiel diese ${ }

<p id="app">
  ${num}
  <button @click="add">addNumber</button>
</p>

  new Vue({
    el: "#app",
    data: {
      num : 1
    },
    methods : {
      add : function() {
        console.log("原生 add");
        this.num++;
      }
    },
    delimiters: ['${', '}']
  });

Hinweis: Trennzeichen entsprechen einem Array

Das obige ist der detaillierte Inhalt vonVergleich der Unterschiede zwischen den Erweiterungs- und Trennzeichenoptionen in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!