computed可定義一些函數,這些函數叫作【計算屬性】
只要data裏面的數據發生變化computed會同步改變
引用【計算屬性】時不要加 () ,應當普通屬性使用
例:console.log(this.computedName)
computed用的最可能是在模板
模版中放入太多聲明式邏輯會讓模板臃腫尤爲在頁面大量使用複雜的邏輯表達式處理數據,
會對頁面的可維護性形成很大的影響,而 computed 的設計初衷也正是用於解決此類問題。
例:<p>{{'名稱:' + this.name + ',年齡:' + this.age + ',性別:' + (this.info.sex ? '男' : '女')}}</p>
儘可能一張圖解釋清楚(嘗試用圈圈區分關係):
![](http://static.javashuo.com/static/loading.gif)
ps:圖片不清晰的嘗試新窗口打開html
通常都只用 getter ,以上內容就是 getter 的默認模式
不多用到 setter ,起碼我作業務暫時沒遇到,面試倒會有人會問
下面舉個例子說說 setter
![](http://static.javashuo.com/static/loading.gif)
不少時候都會拿 Computed 與 Watch 對比(好比面試會問)
這兩個均可以實現相同效果但過程有點不同能夠根據實際狀況來用。
Computed特色:
須要主動調用,具備緩存能力只有數據再次改變纔會從新渲染,
不然就會直接拿取緩存中的數據。面試
Watch特色:
不管在哪隻要被綁定數據發生變化Watch就會響應,
這個特色很適合在異步操做時用上。緩存
原文出處:https://www.cnblogs.com/konghaowei/p/10893404.html異步