在使用Vue.js時，會發現呼叫menthods裡的方法也可以與計算機屬性起到同樣的作用，如：

<div id="app">
 
 <!--利用計算機屬性實現逆向文字的效果-->
 <input type="text" v-model="text" property="請輸入要逆轉的文字/>
 <!--逆轉的方法-->
 <h3>計算機屬性逆轉：{{reversedText}}</h3>
 <!--通過呼叫methods裡的方法也可以與計算機屬性起到同樣的作用-->
 <!--注意，方法要帶'()'-->
 <h3>方法逆轉：{{reversedTextM()}}</h3>
 
</div>
<script>
 var app = new Vue({
  el: '#app',
  data: {
  text: '123,456'
  },
  methods: {
  reversedTextM: function () { 
   return this.text.split(',').reverse().join(',');
  },
  },
  computed: {
  reversedText: function () { //翻轉文字的方法
   //這裡的this指向當前Vue例項
   return this.text.split(',').reverse().join(',');
  }
  }
 });
</script>

在methods裡定義了一個方法實現了和計算機屬性相同的效果，甚至該方法還可以接受引數，使用起來更靈活，既然使用methods就可以實現，那為什麼還需要計算機屬性呢？原因就是計算機屬性是基於它的依賴快取的。一個計算機屬性所依賴的資料發生變化時，它才會重新賦值，所以text只要不改變，計算機屬性也就不會更新，如：

computed: {
 now: function () {
 return Date.now();
 }
}

這裡的Date.now()不是響應式依賴，所以計算機屬性now不會更新。但是methods則不同，只要重新渲染，它就會被呼叫，因此函式也會被執行。

總結： 使用計算機屬性還是methods取決於你是否需要快取，當遍歷大陣列和做大量計算時，應當使用計算機屬性，除非你不希望得到快取。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援碼農教程。