一.計算屬性：
我們在開發當中通常會遇到這種情況，需要返回的是兩個變數的計算值 ，那我們就在computed屬性中去定義計算的方法：
eg：我們現在有兩個變數：fristname 和 lastname 。我們想要頁面輸出的是fullname 全名:
當更改age的時候， fullname 函式不執行；
只有當更改 firstname或 lastname fullname才會執行
data()
},computed:
},
效果：hani wen
當更改age的時候， fullname 函式執行， 這樣就增加了**冗餘，瀏覽器執行效能降低；
當更改fristname的時候， fullname 函式仍執行。
methods:
}
}hani wen
但是方法和計算屬性有什麼區別呢？
方法沒有快取機制，計算屬性的效能更好。
先初始化資料：
data()
}
watch:,
lastname:function(),
hani wen
雖然監聽的方法能夠實現計算的結果，也有快取的機制，但是看起來冗餘。
這三種綜合來看，涉及到計算，還是用computed比較好。
在computed中可以將fullname 定義成乙個物件，在物件中定義get 和set 的方法。
computed:,
set:function(value)
}},
當我們第一次使用計算屬性的時候，會執行計算屬性並進行計算，然後將計算屬性結果快取起來
後續我們在去使用計算屬性的時候，如果計算屬性使用的資料沒有發生改變，那麼就會直接讀取快取結果，不會重新計算
注意：每次計算的結果快取的時候。都會重新建立乙個便令儲存結果
偵聽器特點
當定義乙個偵聽器的時候，如果偵聽器與data的屬性同名，當屬性的值發生改變的時候，偵聽器就會被觸發執行
注意：乙個偵聽器對應data中的乙個屬性，當屬性發生變化時觸發偵聽器執行
分析結果：
從上面的特點來說，我們可以得出結論：
1).計算屬性的應用場景是計算的內容需要依賴多個屬性的情況
偵聽器的應用場景是計算的內容依賴乙個屬性的情況
2).計算屬性快取結果時每次都會重新建立變數
而偵聽器是直接計算，不會建立變數儲存結果
也就意味著，資料如果會反覆的發生變化，計算很多次的情況下，計算屬性的開銷將會更大，也就意味著這種情況不適合使用計算屬性，適合使用偵聽器
那麼，如果乙個資料反覆會被使用，但是它計算依賴的內容很少發生變化的情況下，計算屬性會快取結果，就更加適合這種情況。
3).computed的結果是通過return返回的，而watch不需要return。
4).watch中的引數可以得到偵聽屬性改變的最新結果，而computed函式沒有這種引數。
補充：watch只會監聽資料的值是否發生改變，而不會監聽位址的變化，如果需要監聽引用型別的資料變化，需要深度監聽：obj:,deep:true}------用handler+deep的方式進行深度監聽。
在特殊的情況下(更改陣列中的資料時，陣列已經更改，但是檢視沒有更新)，watch無法監聽陣列的變化,更改陣列必須要用splice()或者$set。
結論：我們在計算開銷比較大(計算次數多或者非同步處理)的時候，會使用偵聽器watch來得到計算結果。
而其他情況建議使用計算屬性computed，因為快取節省多次計算的效能。
計算屬性 方法和偵聽器
doctype html en utf 8 計算屬性 方法和偵聽器 title vue.js script head root div newvue 計算屬性 computed script body html 計算屬性在使用的時候會有乙個快取，其依賴的data，在沒有發生變化的時候，計算屬性就不會...
計算屬性和偵聽器
1 計算屬性快取 vs 方法 將乙個函式定義為計算屬性和方法得到的結果是相同的。但不同的是計算屬性是基於它們的依賴進行快取的，只是在相關依賴發生改變時才會重新求值。方法 methods 計算屬性 computed 2 計算屬性 vs 偵聽屬性 偵聽屬性 觀察和響應vue例項上的資料變動 watch ...
計算屬性和偵聽器
div id example p original message p p computed reversed message p div var vm new vue computed 結果 original message hello computed reversed message olle...