vue中計算屬性和方法的區(qū)別及說明
更新時間：2022年09月07日 10:18:04 作者：混子前端
這篇文章主要介紹了vue中計算屬性和方法的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue計算屬性和方法區(qū)別
當我們實現(xiàn)翻轉(zhuǎn)字符串的業(yè)務(wù)邏輯時，使用插值表達式打碼如下：
<div id="app">
<div>{{msg}}</div>
<div>{{msg.split('').reverse().join('')}}</div>
</div>
為了將復雜了業(yè)務(wù)邏輯便于管理，使得不顯得雜亂無章，我們使用計算屬性：
<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('');
}
}
結(jié)果如下圖：
如圖，控制臺的結(jié)果說明，在相同的依賴（data中的數(shù)據(jù)）下，計算屬性只會執(zhí)行一次邏輯，而方法每次調(diào)用都會執(zhí)行，所以：計算屬性在一定條件下進行了一定的性能優(yōu)化。
區(qū)別
計算屬性是基于依賴進行緩存的，而方法則不緩存。
vue向計算屬性傳遞參數(shù)
{{componentVal('input')}}
componentVal () {
?return (val) => {
? ? return 'el-' + val
? }
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
通過自定義右鍵菜單欄,用戶可以根據(jù)自己的需求添加、調(diào)整和刪除菜單選項,所以本文就來為大家介紹一下如何使用使用Vue封裝一個自定義的右鍵菜單組件吧2024-01-01
這篇文章主要為大家介紹了JS圖片懶加載庫VueLazyLoad示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)
這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue?codemirror實現(xiàn)在線代碼編譯器效果
這篇文章主要介紹了vue-codemirror實現(xiàn)在線代碼編譯器?,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-12-12
本篇文章主要介紹了基于vue的換膚功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue-cli中vue本地實現(xiàn)跨域調(diào)試接口
這篇文章主要介紹了vue-cli中vue本地實現(xiàn)跨域調(diào)試接口,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue定義在computed的變量無法更新問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了vue如何獲取點擊事件源的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了Vue3.0手寫輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Vue結(jié)合高德地圖實現(xiàn)HTML寫自定義信息彈窗全過程
最近開發(fā)中遇到一個多個點繪制,并實現(xiàn)點擊事件,出現(xiàn)自定義窗口顯示相關(guān)信息等功能,下面這篇文章主要給大家介紹了關(guān)于Vue結(jié)合高德地圖實現(xiàn)HTML寫自定義信息彈窗的相關(guān)資料,需要的朋友可以參考下2023-04-04