溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Vue中計算屬性和偵聽器怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue中計算屬性和偵聽器怎么使用”吧!
在Vue中通常我們會在模板綁定表達式，模板是用來描述視圖結構的。如果模板中的表達式存在過多的邏輯性語句，那么整個模板就會變得特別的臃腫，可讀性和維護性將會降低，因此為了簡化邏輯，我們會使用計算屬性
基本用法：
computed:{
A:function(){
return B+C
}
}如果學過面向對象語言，應該知道面向對象的標準之一封裝，需要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
}
}實際上，計算屬性是基于他們的響應式依賴進行緩存的，而方法不存在緩存
而計算屬性的緩存也有它的壞處，當重復調用時，就會發生一些多余的步驟，導致大量不必要的運算
這時候就需要
cache：false
關閉緩存
再來看他的緩存方式，計算屬性是具有依賴性的，依賴data中的數據，如果數據改變，相應的就會改變，這就要說到另外一個東西：偵聽器
什么是偵聽器呢？偵聽器用來偵聽數據的變化，如果數據發生變化就會觸發綁定的方法
偵聽器又有自己的應用場景：數據變化執行時異步或開銷比較大的操作
基本使用：
watch:{
firstN:function(val){
this.A=val+this.C
}
}偵聽器，相比于計算屬性來說，是很容易重復的，所以Vue也建議，通常更好的做法是使用計算屬性而不是watch
到此，相信大家對“Vue中計算屬性和偵聽器怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
