在使用Vue.js時，會發現調用menthods里的方法也可以與計算機屬性起到同樣的作用，如：
<div id="app">
<!--利用計算機屬性實現逆向文本的效果-->
<input type="text" v-model="text" property="請輸入要逆轉的文本/>
<!--逆轉的方法-->
<h4>計算機屬性逆轉：{{reversedText}}</h4>
<!--通過調用methods里的方法也可以與計算機屬性起到同樣的作用-->
<!--注意，方法要帶'()'-->
<h4>方法逆轉：{{reversedTextM()}}</h4>
</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取決于你是否需要緩存，當遍歷大數組和做大量計算時，應當使用計算機屬性，除非你不希望得到緩存。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
