如何使用vue.js中的$watch

Question

如何使用vue.js中的$watch

Answer 1

Observer, Watcher, vm 可谓 Vue 中比较重要的部分，检测数据变动后视图更新的重要环节。下面我们来看看 如何实现一个简单的 $watch 功能，当然Vue 中使用了很多优化手段，在本文中暂不一一讨论。
例子:
// 创建 vm
let vm = new Vue({
data: 'a'
})

// 键路径
vm.$watch('a.b.c', function () {
// 做点什么
})

先阐明在这个 demo 以及Vue 中，它们的关系：
vm 调用 $watch 后，首先调用 observe 函数 创建 Observer 实例观察数据，Observer 又创建 Dep , Dep 用来维护订阅者。然后创建 Watcher 实例提供 update 函数。一旦数据变动，就层层执行回调函数。