vue的computed計算屬性


computed可定義一些函數,這些函數叫做【計算屬性】
只要data里面的數據發生變化computed會同步改變
引用【計算屬性】時不要加  () ,應當普通屬性使用
例:console.log(this.computedName)
 
computed用的最多是在模板
模版中放入太多聲明式邏輯會讓模板臃腫尤其在頁面大量使用復雜的邏輯表達式處理數據,
會對頁面的可維護性造成很大的影響,而 computed 的設計初衷也正是用於解決此類問題。
例:<p>{{'名稱:' + this.name + ',年齡:' + this.age + ',性別:' + (this.info.sex ? '男' : '女')}}</p>
 
盡量一張圖解釋清楚(嘗試用圈圈區分關系):

 ps:圖片不清晰的嘗試新窗口打開

 
一般都只用 getter ,以上內容就是 getter 的默認模式
很少用到 setter ,起碼我做業務暫時沒遇到,面試倒會有人會問
下面舉個例子說說 setter
 
 
 
很多時候都會拿 Computed 與 Watch 對比(比如面試會問)
這兩個都可以實現相同效果但過程有點不一樣可以根據實際情況來用。

 

Computed特點:
需要主動調用,具有緩存能力只有數據再次改變才會重新渲染,
否則就會直接拿取緩存中的數據。

Watch特點:
無論在哪只要被綁定數據發生變化Watch就會響應,
這個特點很適合在異步操作時用上。

 

 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM