觀察 Watchers

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watcher 。這是為什么 Vue 提供一個更通用的方法通過watch 選項，來響應數據的變化。當你想要在數據變化響應時，執行異步操作或開銷較大的操作，這是很有用的。

大家對于 watch 應該不陌生，項目中都用過下面這種寫法：

watch: { someProp () {  // do something }}// 或者watch: { someProp: {  deep: true,  handler () {   // do something  } }}

上面的寫法告訴 vue，我需要監聽 someProp 屬性的變化，于是 vue 在內部就會為我們創建一個 watcher 對象。（限于篇幅，我們不聊 watcher 的具體實現，感興趣的可以直接看源碼 watcher）

然而在 vue 中，watcher 的功能并沒有這么單一，先上段代碼：

<template> <div>  <p>a: {{ a }}</p>  <p>b: {{ b }}</p>  <button @click="increment">+</button> </div></template><script>export default { data () {  return {   a: 1  } }, computed: {  b () {   return this.a * 2  } }, watch: {  a () {    console.log('a is changed')  } }, methods: {  increment () {   this.a += 1  } }, created () {  console.log(this._watchers) }}</script>

在線demo

上面代碼非常簡單，我們現在主要關注 created 鉤子中打印的 this._watchers，如下：

分別展開三個 watcher，觀察每一個 expression，從上到下分別為：

b() {   return this.a * 2;↵  }"a"function () {   vm._update(vm._render(), hydrating);↵  }

上面三個 watcher 代表了三種不同功能的 watcher，我們將其按功能分為三類：

normal-watcher

我們在 watch 中定義的，都屬于這種類型，即只要監聽的屬性改變了，都會觸發定義好的回調函數

computed-watcher

每一個 computed 屬性，最后都會生成一個對應的 watcher 對象，但是這類 watcher 有個特點，我們拿上面的 b 舉例：

屬性 b 依賴 a，當 a 改變的時候，b 并不會立即重新計算，只有之后其他地方需要讀取 b 的時候，它才會真正計算，即具備 lazy（懶計算）特性

render-watcher

每一個組件都會有一個 render-watcher, function () {↵ vm._update(vm._render(), hydrating);↵ }, 當 data/computed

中的屬性改變的時候，會調用該 render-watcher 來更新組件的視圖

三種 watcher 的執行順序

除了功能上的區別，這三種 watcher 也有固定的執行順序，分別是：

computed-render -> normal-watcher -> render-watcher