computed 計算屬性說明:
computed 是基于響應性依賴來進行緩存的。只有依賴數據發生改變，才會重新進行計算（當觸發重新渲染，若依賴數據沒有改變，則 computed 不會重新計算）。若沒改變，計算屬性會立即返回之前緩存的計算結果。
不支持異步，當 computed 內有異步操作時無效，無法監聽數據的變化的值。
computed 中的成員可以只定義一個函數作為只讀屬性, 也可以定義成 get/set 變成可讀寫屬性
如果一個屬性是由其他屬性計算而來的，這個屬性依賴其他屬性，是一個多對一或者一對一，一般用 computed。
下面的計算屬性將不再更新，因為 Date.now() 不是響應式依賴：
|
1
2
3
4
5
|
computed: { now: function () { return Date.now() }} |
相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數。
我們為什么需要緩存？假設我們有一個性能開銷比較大的計算屬性 A，它需要遍歷一個巨大的數組并做大量的計算。然后我們可能有其他的計算屬性依賴于 A。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。
watch 監聽屬性說明：
不支持緩存，數據變或者觸發重新渲染時，直接會觸發相應的操作。
watch 支持異步
當一個屬性發生變化時，需要執行對應的操作；一對多時，一般用 watch。
監聽數據必須是 data 中聲明過或者父組件傳遞過來的 props 中的數據，當數據變化時，觸發其他操作，函數有兩個參數，immediate：組件加載立即觸發回調函數執行，deep: 深度監聽，為了發現對象內部值的變化，復雜類型的數據時使用，例如數組中的對象內容的改變，注意監聽數組的變動不需要這么做。注意：deep 無法監聽到數組的變動和對象的新增，參考 vue 數組變異,只有以響應式的方式觸發才會被監聽到。
watch 和 computed 的區別是：
相同點：
兩者都是觀察頁面數據變化的。
不同點：
- computed 只有當依賴的數據變化時才會計算, 會緩存數據。
- watch 每次都需要執行函數。watch 更適用于數據變化時的異步操作。
使用 參考官方文檔
computed 使用
類型：{ [key: string]: Function | { get: Function, set: Function } }
詳細：
計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。
注意如果你為一個計算屬性使用了箭頭函數，則 this 不會指向這個組件的實例，不過你仍然可以將其實例作為函數的第一個參數來訪問。
|
1
2
3
|
computed: { aDouble: vm => vm.a * 2} |
計算屬性的結果會被緩存，除非依賴的響應式 property 變化才會重新計算。注意，如果某個依賴 (比如非響應式 property) 在該實例范疇之外，則計算屬性是不會被更新的。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var vm = new Vue({ data: { a: 1 }, computed: { // 僅讀取 aDouble: function () { return this.a * 2 }, // 讀取和設置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 }, }, },})vm.aPlus // => 2vm.aPlus = 3vm.a // => 2vm.aDouble // => 4 |
watch 使用 與 解釋
類型：{ [key: string]: string | Function | Object | Array }
詳細：
一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個 property。
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5, }, }, }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 該回調會在任何被偵聽的對象的 property 改變時被調用，不論其被嵌套多深 c: { handler: function (val, oldVal) { ;/_ ... _/ }, // or handler:'方法名' deep: true, }, // 該回調將會在偵聽開始之后被立即調用 d: { handler: 'someMethod', // or handler: function(val, oldVal){} immediate: true, }, // 你可以傳入回調數組，它們會被逐一調用 e: [ 'handle1', function handle2(val, oldVal) { /* ... */ }, { handler: function handle3(val, oldVal) { /* ... */ }, /* ... */ }, ], // watch vm.e.f's value: {g: 5} 'e.f': function (val, oldVal) { ;/_ ... _/ }, },})vm.a = 2 // => new: 2, old: 1 |
說明： 對應上方的 a~e
a: 監聽一個屬性,需要使用前后變化值時使用
b: 監聽一個屬性，不會使用到改變前后的值，只為了執行一些方法，可以使用字符串代替 字符串代表方法名
c: 在監聽一個對象時，當對象內部的屬性被改變時，無法觸發 watch,設置 deep 為 true 后，無論嵌套多深，只要屬性值被改變都會觸發監聽。但這種方式開銷會較大，監聽器會一層一層往下找，為每個屬性添加監聽器。
如果我們只是監聽對象的某個屬性改變時，可以這樣做：
|
1
2
3
4
5
6
|
watch:{ 'user.name':{ handler: 'method' }} |
d: watch 是在監聽屬性改變時才會觸發，組件創建時可能不會執行，因此我們可以設置 immediate: true,就會讓在組件創建后 watch 能夠立即執行一次。就不用在 create 的時候去修改屬性啦。
handelr： 觸發監聽執行的方法（需要用到改變前后的值時，可換成函數）
immediate： 監聽開始之后被立即調用
e: 監聽一個屬性，執行多個函數包括回調等
注意，不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.updateAutocomplete 將是 undefined。
總結
到此這篇關于vue中watch和computed的區別與使用方法的文章就介紹到這了,更多相關vue watch和computed的區別內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：http://book.levy.net.cn/doc/frontend/vue/vue_computed_watch.html
