Vue.js中extend選項和delimiters選項的區別是什么

Vue.js中extend選項和delimiters選項的區別是什么，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

extend選項

允許聲明擴展另一個組件（可以是一個簡單的選項對象或構造函數），而無需使用Vue.extend，這主要是為了便于擴展單文件組件，它和mixin有類似之處

<div id="app">
  {{num}}
  <button @click="add">addNumber</button>
</div>
<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('原生updated');
    },
    extends : extendsObj,
  });
</script>

上面的代碼擴展的是updated，執行結果如下：

可以看出擴展的update先執行，那么下面看看擴展methods的時候，只是下面的部分不同而已

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

執行結果其實就是上面圖片的樣子，也就是說，對于methods來說，遇到同名的函數，則執行的是非擴展的函數，如果擴展的是非同名的函數，則按照擴展之后的執行

delimiters選項

默認的插值的寫法是{{}}，但是在某些情況下，我們需要使用一些不一樣的方式，比如這樣${}

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

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

注意：delimiters對應的是一個數組

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。