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