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

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

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

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