methods和computed和watch的聯絡和區別
阿新 • • 發佈：2019-01-07
一.methods和computed
computed是計算屬性，methods是方法。
html：
<p>Reversed
message: "{{ reversedMessage() }}"</p>
js：
1.
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return我們可以將同一函式定義為一個 method 或者一個計算屬性。對於最終的結果，兩種方式確實是相同的。
不同的是computed計算屬性是基於它們的依賴進行
message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函式。而對於method
，只要發生重新渲染，method 呼叫總會執行該函式。當有一個性能開銷比較大的的計算屬性 A ，它需要遍歷一個極大的陣列和做大量的計算。然後我們可能有其他的計算屬性依賴於 A ，這時候，我們就需要快取！
但是，快取也有自己的缺點：
也同樣意味著下面的計算屬性將不再更新，因為 Date.now() 不是響應式依賴：
|
computed: { now: function |
總之：資料量大，需要快取的時候用computed；每次確實需要重新載入，不需要快取時用methods
二.computed和watchVue 提供了一種更通用的方式來觀察和響應 Vue 例項上的資料變動：watch 屬性。
當你有一些資料需要隨著其它資料變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，更好的想法是使用 computed 屬性而不是命令式的 watch 回撥。細想一下這個例子：
| <div id="demo">{{ fullName }}</div> |
| var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } }}) |
上面程式碼是命令式的和重複的。將它與 computed 屬性的版本進行比較：
| var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }}) |