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>
<!--通過調(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ù)，使用起來更靈活，既然使用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ī)屬性，除非你不希望得到緩存。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue靜態(tài)界面之左二級(jí)菜單右表單表格的實(shí)例代碼
這篇文章主要介紹了vue靜態(tài)界面之左二級(jí)菜單右表單表格，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
Vue 使用iframe引用html頁面實(shí)現(xiàn)vue和html頁面方法的調(diào)用操作
這篇文章主要介紹了Vue 使用iframe引用html頁面實(shí)現(xiàn)vue和html頁面方法的調(diào)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
本篇文章主要介紹了Vue自定義指令封裝節(jié)流函數(shù)的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
vue的人都知道,vue3里面使用了proxy替換了defineProperty,本文主要介紹了Vue3用Proxy替代defineProperty的原因,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要介紹了vue中分割線的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了Vue snippets插件原理與使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
這篇文章主要介紹了vue多層嵌套路由,結(jié)合實(shí)例形式分析了vue.js多層嵌套路由的概念、原理及相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue開發(fā)環(huán)境中修改端口號(hào)的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue在mounted中window.onresize不生效問題及解決
這篇文章主要介紹了vue中在mounted中window.onresize不生效問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Element UI是一個(gè)為Vue.js開發(fā)的優(yōu)秀 UI 組件庫,它提供了豐富的組件,包括表單組件,Element UI的表單組件可以幫助開發(fā)者快速構(gòu)建和管理表單,提高開發(fā)效率,在實(shí)際開發(fā)中,我們經(jīng)常需要在表單組件之間進(jìn)行通信,本文將詳細(xì)介紹Element UI表單組件如何進(jìn)行通信2025-02-02