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