Comparison of the differences between extend and delimiters options in Vue.js

This article mainly introduces the relevant information about the comparison of extend option and delimiters option in Vue.js. Friends in need can refer to

Comparison of extend option and delimiters option in Vue.js

extend option

Allows the declaration to extend another component (can be a simple options object or constructor) without using Vue.extend, this Mainly to facilitate the expansion of single-file components, which are similar to 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>

The above code is expanded by updated, and the execution results are as follows:

It can be seen that the extended update is executed first, so when we look at the extended methods below, only the following parts are different

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

Execution The result is actually what the picture above looks like. That is to say, for methods, if a function with the same name is encountered, a non-expanded function will be executed. If a function with a non-named name is extended, the execution after expansion will be performed

delimiters option

The default interpolation method is {{}}, but in some cases, we need to use some different methods, such as this ${}

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

Note: delimiters corresponds to an array

The above is the detailed content of Comparison of the differences between extend and delimiters options in Vue.js. For more information, please follow other related articles on the PHP Chinese website!