Vue.js計算機屬性computed和methods方法詳解
更新時間：2019年10月12日 08:31:49 作者：love_pgme
這篇文章主要為大家詳細(xì)介紹了Vue.js計算機屬性computed和methods方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在使用Vue.js時，會發(fā)現(xiàn)調(diào)用menthods里的方法也可以與計算機屬性起到同樣的作用，如：
<div id="app">
<!--利用計算機屬性實現(xiàn)逆向文本的效果-->
<input type="text" v-model="text" property="請輸入要逆轉(zhuǎn)的文本/>
<!--逆轉(zhuǎn)的方法-->
<h3>計算機屬性逆轉(zhuǎn)：{{reversedText}}</h3>
<!--通過調(diào)用methods里的方法也可以與計算機屬性起到同樣的作用-->
<!--注意，方法要帶'()'-->
<h3>方法逆轉(zhuǎn)：{{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 () { //翻轉(zhuǎn)文本的方法
//這里的this指向當(dāng)前Vue實例
return this.text.split(',').reverse().join(',');
}
}
});
</script>
在methods里定義了一個方法實現(xiàn)了和計算機屬性相同的效果，甚至該方法還可以接受參數(shù)，使用起來更靈活，既然使用methods就可以實現(xiàn)，那為什么還需要計算機屬性呢？原因就是計算機屬性是基于它的依賴緩存的。一個計算機屬性所依賴的數(shù)據(jù)發(fā)生變化時，它才會重新賦值，所以text只要不改變，計算機屬性也就不會更新，如：
computed: {
now: function () {
return Date.now();
}
}
這里的Date.now()不是響應(yīng)式依賴，所以計算機屬性now不會更新。但是methods則不同，只要重新渲染，它就會被調(diào)用，因此函數(shù)也會被執(zhí)行。
總結(jié)： 使用計算機屬性還是methods取決于你是否需要緩存，當(dāng)遍歷大數(shù)組和做大量計算時，應(yīng)當(dāng)使用計算機屬性，除非你不希望得到緩存。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vuex實現(xiàn)簡單的購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了Vue首頁加載白屏原因以及10種解決方法匯總，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue.js?是一個流行且強大的?JavaScript?框架,它允許我們構(gòu)建動態(tài)和交互式?Web?應(yīng)用程序,本文我們將深入探討?Vue.js?應(yīng)用程序中內(nèi)存泄漏的原因,并探索如何定位和修復(fù)這些問題的有效策略,希望對大家有所幫助2023-09-09
這篇文章主要介紹了解決ant-design-vue安裝報錯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vue-manage-system升級到vue3的開發(fā)總結(jié)分析
這篇文章主要為大家介紹了vue-manage-system升級到vue3的開發(fā)總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue過濾器filters用于一些常見的文本格式化,通過過濾器可以進行處理成自己想要展示出來的格式,由“管道”符號指示,本文給大家介紹Vue過濾器filters使用方式,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了詳解vue實現(xiàn)坐標(biāo)拾取器功能示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了vue集成chartjs的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)div滾輪放大縮小，拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家介紹了van-cell如何使用插槽詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-12-12