Observer, Watcher, vm 可謂 Vue 中比較重要的部分，檢測數(shù)據(jù)變動后視圖更新的重要環(huán)節(jié)。下面我們來看看 如何實現(xiàn)一個簡單的 $watch 功能，當然Vue 中使用了很多優(yōu)化手段，在本文中暫不一一討論。
例子:
// 創(chuàng)建 vm
let vm = new Vue({
data: 'a'
})

// 鍵路徑
vm.$watch('a.b.c', function () {
// 做點什么
})

先闡明在這個 demo 以及Vue 中，它們的關系：
vm 調(diào)用 $watch 后，首先調(diào)用 observe 函數(shù) 創(chuàng)建 Observer 實例觀察數(shù)據(jù)，Observer 又創(chuàng)建 Dep , Dep 用來維護訂閱者。然后創(chuàng)建 Watcher 實例提供 update 函數(shù)。一旦數(shù)據(jù)變動，就層層執(zhí)行回調(diào)函數(shù)。

Observer,Watcher,vm可謂Vue中比較重要的部分，檢測數(shù)據(jù)變動后視圖更新的重要環(huán)節(jié)。下面我們來看看如何實現(xiàn)一個簡單的$watch功能，當然Vue中使用了很多優(yōu)化手段，在本文中暫不一一討論。例子://創(chuàng)建vmletvm=newVue({data:'a'})//鍵路徑vm.$watch('a.b.c',function(){//做點什么})先闡明在這個demo以及Vue中，它們的關系：vm調(diào)用$watch后，首先調(diào)用observe函數(shù)創(chuàng)建Observer實例觀察數(shù)據(jù)，Observer又創(chuàng)建Dep,Dep用來維護訂閱者。然后創(chuàng)建Watcher實例提供update函數(shù)。一旦數(shù)據(jù)變動，就層層執(zhí)行回調(diào)函數(shù)。