Vue中計算屬性和偵聽器怎么使用

本篇內(nèi)容主要講解“Vue中計算屬性和偵聽器怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue中計算屬性和偵聽器怎么使用”吧!

在Vue中通常我們會在模板綁定表達式，模板是用來描述視圖結(jié)構(gòu)的。如果模板中的表達式存在過多的邏輯性語句，那么整個模板就會變得特別的臃腫，可讀性和維護性將會降低，因此為了簡化邏輯，我們會使用計算屬性

基本用法：

computed:{
A:function(){
return B+C
}
}

如果學過面向?qū)ο笳Z言，應(yīng)該知道面向?qū)ο蟮臉藴手环庋b，需要getter也需要setter，而上面的寫法，實際上只寫了getter而沒有寫setter

那么我們就可以換種寫法

computed:{
A:{
get:function(){
return B+C
}
set:function(newVal){
var names=newVal.splir(' ')
this.B=names[0]
this.C=names[1]
}
}
}

這樣寫就明了很多了

這個時候，可能會奇怪，似乎計算屬性能做的用方法來也可以做

也就是

methods: {
  A: function () {
    return B+C
  }
}

實際上，計算屬性是基于他們的響應(yīng)式依賴進行緩存的，而方法不存在緩存

而計算屬性的緩存也有它的壞處，當重復調(diào)用時，就會發(fā)生一些多余的步驟，導致大量不必要的運算

這時候就需要

cache：false

關(guān)閉緩存

再來看他的緩存方式，計算屬性是具有依賴性的，依賴data中的數(shù)據(jù)，如果數(shù)據(jù)改變，相應(yīng)的就會改變，這就要說到另外一個東西：偵聽器
什么是偵聽器呢？偵聽器用來偵聽數(shù)據(jù)的變化，如果數(shù)據(jù)發(fā)生變化就會觸發(fā)綁定的方法
偵聽器又有自己的應(yīng)用場景：數(shù)據(jù)變化執(zhí)行時異步或開銷比較大的操作
基本使用：

watch:{
firstN:function(val){
this.A=val+this.C
}
}

偵聽器，相比于計算屬性來說，是很容易重復的，所以Vue也建議，通常更好的做法是使用計算屬性而不是watch

到此，相信大家對“Vue中計算屬性和偵聽器怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！