Comparaison des différences entre les options d'extension et de délimiteurs dans Vue.js

Cet article présente principalement les informations pertinentes sur la comparaison entre l'option d'extension et l'option de délimiteurs dans Vue.js. Les amis qui en ont besoin peuvent se référer à

Comparaison de l'option d'extension et des délimiteurs. option dans Vue.js

option d'extension

permet de déclarer une extension d'un autre composant (peut être un simple objet ou constructeur d'options) sans utiliser Vue.extend , ceci principalement pour faciliter l'expansion des composants à fichier unique, qui sont similaires aux mixins

<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>

Le code ci-dessus est étendu avec la mise à jour et les résultats d'exécution sont les mêmes suit :

On peut voir que la mise à jour étendue est exécutée en premier, donc lorsque nous examinons les méthodes étendues ci-dessous, seules les parties suivantes sont différentes

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

Le résultat de l'exécution est en fait à quoi ressemble l'image ci-dessus, c'est-à-dire que pour les méthodes, si une fonction du même nom est rencontrée, une fonction non développée sera. exécuté Si une fonction avec un nom non nommé est développée, l'exécution après expansion sera

option délimiteurs

La manière par défaut d'écrire l'interpolation est {. {}}, mais dans certains cas, nous devons utiliser des méthodes différentes, comme celle-ci ${ }

<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: ['${', '}']
  });

Remarque : les délimiteurs correspond à un tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!