vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明
更新時(shí)間：2022年09月07日 10:18:04 作者：混子前端
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue計(jì)算屬性和方法區(qū)別
當(dāng)我們實(shí)現(xiàn)翻轉(zhuǎn)字符串的業(yè)務(wù)邏輯時(shí)，使用插值表達(dá)式打碼如下：
<div id="app">
<div>{{msg}}</div>
<div>{{msg.split('').reverse().join('')}}</div>
</div>
為了將復(fù)雜了業(yè)務(wù)邏輯便于管理，使得不顯得雜亂無(wú)章，我們使用計(jì)算屬性：
<div id="app">
<div>{{msg}}</div>
計(jì)算屬性：<div>{{resverString}}</div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"happy"
},
computed:{
resverString:function(){
console.log('computed');
return this.msg.split('').reverse().join('');
}
}
})
</script>
效果如下圖：
對(duì)比使用methods方法：
<div id="app">
<div>{{msg}}</div>
計(jì)算屬性：<div>{{resverString}}</div>
計(jì)算屬性：<div>{{resverString}}</div>
方法屬性：<div>{{resv()}}</div>
方法屬性：<div>{{resv()}}</div>
</div>
computed:{
resverString:function(){
console.log('computed');
return this.msg.split('').reverse().join('');
}
},
methods:{
resv:function(){
console.log('methods');
return this.msg.split('').reverse().join('');
}
}
結(jié)果如下圖：
如圖，控制臺(tái)的結(jié)果說(shuō)明，在相同的依賴（data中的數(shù)據(jù)）下，計(jì)算屬性只會(huì)執(zhí)行一次邏輯，而方法每次調(diào)用都會(huì)執(zhí)行，所以：計(jì)算屬性在一定條件下進(jìn)行了一定的性能優(yōu)化。
區(qū)別
計(jì)算屬性是基于依賴進(jìn)行緩存的，而方法則不緩存。
vue向計(jì)算屬性傳遞參數(shù)
{{componentVal('input')}}
componentVal () {
?return (val) => {
? ? return 'el-' + val
? }
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中如何獲取當(dāng)前路由name，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
前端自動(dòng)化測(cè)試Vue中TDD和單元測(cè)試示例詳解
這篇文章主要為大家介紹了前端自動(dòng)化測(cè)試Vue中TDD和單元測(cè)試示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式
這篇文章主要介紹了vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
ant design vue導(dǎo)航菜單與路由配置操作
這篇文章主要介紹了ant design vue導(dǎo)航菜單與路由配置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了Vue中的項(xiàng)目打包及部署全流程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue不能watch數(shù)組和對(duì)象變化解決方案
這篇文章主要為大家介紹了Vue不能watch數(shù)組和對(duì)象變化解決方案示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了vue清空f(shuō)orm對(duì)象的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue生命周期區(qū)別詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
Vue?中的?computed?和?watch?的區(qū)別詳解
這篇文章主要介紹了Vue中的computed和watch的區(qū)別詳解，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
vue 彈出框 引入另一個(gè)vue頁(yè)面的示例代碼
這篇文章主要介紹了vue 彈出框引入另一個(gè)vue頁(yè)面,這種方式適用于在一個(gè)頁(yè)面邏輯比較多的時(shí)候,可以搞多個(gè)頁(yè)面,防止出錯(cuò),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08