Vue中計算屬性和偵聽器怎么使用-創新互聯

本篇內容主要講解“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中計算屬性和偵聽器怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是創新互聯網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！

網站標題：Vue中計算屬性和偵聽器怎么使用-創新互聯
路徑分享：http://m.kartarina.com/article32/dcjjpc.html

成都網站建設公司_創新互聯，為您提供品牌網站建設、網站建設、網站維護、網站內鏈、商城網站、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯