vue中計(jì)算屬性和方法的區(qū)別及說明
更新時(shí)間：2022年09月07日 10:18:04 作者：混子前端
這篇文章主要介紹了vue中計(jì)算屬性和方法的區(qū)別及說明，具有很好的參考價(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ù)邏輯便于管理，使得不顯得雜亂無章，我們使用計(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é)果說明，在相同的依賴（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)文章
通過自定義右鍵菜單欄,用戶可以根據(jù)自己的需求添加、調(diào)整和刪除菜單選項(xiàng),所以本文就來為大家介紹一下如何使用使用Vue封裝一個(gè)自定義的右鍵菜單組件吧2024-01-01
這篇文章主要為大家介紹了JS圖片懶加載庫VueLazyLoad示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)
這篇文章主要介紹了Vue在自定義指令綁定的處理函數(shù)中傳遞參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue?codemirror實(shí)現(xiàn)在線代碼編譯器效果
這篇文章主要介紹了vue-codemirror實(shí)現(xiàn)在線代碼編譯器?,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
本篇文章主要介紹了基于vue的換膚功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口
這篇文章主要介紹了vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue定義在computed的變量無法更新問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了vue如何獲取點(diǎn)擊事件源的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了Vue3.0手寫輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Vue結(jié)合高德地圖實(shí)現(xiàn)HTML寫自定義信息彈窗全過程
最近開發(fā)中遇到一個(gè)多個(gè)點(diǎn)繪制,并實(shí)現(xiàn)點(diǎn)擊事件,出現(xiàn)自定義窗口顯示相關(guān)信息等功能,下面這篇文章主要給大家介紹了關(guān)于Vue結(jié)合高德地圖實(shí)現(xiàn)HTML寫自定義信息彈窗的相關(guān)資料,需要的朋友可以參考下2023-04-04