這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)vue 中watcher的作用是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

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

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

在線demo

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

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

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

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

• 在 watch 中定義的，用于監(jiān)聽屬性變化的 watcher （第二個）

• 用于 computed 屬性的 watcher （第一個）

• 用于頁面更新的 watcher （第三個）

normal-watcher

我們在 watch 中定義的，都屬于這種類型，即只要監(jiān)聽的屬性改變了，都會觸發(fā)定義好的回調(diào)函數(shù)

computed-watcher

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

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

render-watcher

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

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

三種 watcher 的執(zhí)行順序

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

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

這樣安排是有原因的，這樣就能盡可能的保證，在更新組件視圖的時候，computed 屬性已經(jīng)是最新值了，如果 render-watcher 排在 computed-render 前面，就會導(dǎo)致頁面更新的時候 computed 值為舊數(shù)據(jù)。

下面從一段實(shí)例代碼中看下vue中的watcher

在這個示例中，使用 watch 選項(xiàng)允許我們執(zhí)行異步操作（訪問一個 API），限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這是計(jì)算屬性無法做到的。

Ask a yes/no question:


{{ answer }}