遍历状态，修改状态的getter和setter，当页面上对应状态被首次渲染的时候，会为页面上每一个使用到data的地方新建一个watcher，并将当前watcher保存到全局变量Dep.target中，在对应data的getter中就会调用Dep.depend方法，将当前的watcher添加到当前的Dep中，一个Dep对应一个或多个watcher，着取决于，此状态被使用的数量。当data被修改时，对应的setter就会被触发，会调用对应的Dep中的notify方法，通知所有观察者，进行更新。
这里出现了两个定的类：Dep和Watcher，其中Dep管理观察者，Wathcer代表观察者
先看一下Dep
// src/core/observer/dep.js export default class Dep { static target: ?Watcher; id: number; subs: Array<Watcher>; constructor () { this.id = uid++ this.subs = [] } addSub (sub: Watcher) { this.subs.push(sub) } removeSub (sub: Watcher) { remove(this.subs, sub) } depend () { if (Dep.target) { // 调用当前target，也就是正在处理的watcher的addDep方法，并把此Dep传进去 Dep.target.addDep(this) } } notify () { // stablize the subscriber list first const subs = this.subs.slice() for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } } }
看一下watcher.js
// src/core/observer/watcher.js export default class Watcher { ... addDep (dep: Dep) { const id = dep.id if (!this.newDepIds.has(id)) { this.newDepIds.add(id) this.newDeps.push(dep) if (!this.depIds.has(id)) { // 将当前watcher添加到当前的Dep中 dep.addSub(this) } } } ... }
总结
vue的响应式数据绑定主要依赖Object.defineProperty和观察者模式。
在我们新建一个vue实例的时候，做一系列的初始化工作，这部分的逻辑集中在src文件夹下的core文件夹下的instance和observer文件夹内
响应式数据绑定是在状态的初始化阶段完成的，在initState方法中的initData中进行data的数据绑定。
在initData中调用observe方法，为该data新建一个Observer类，然后最终调用为data中的每一个成员调用walk方法，在walk中通过defineReactive方法劫持当前数据
在defineReactive中通过Object.defineProperty去修改数据的getter和setter
在页面渲染的时候，页面上每一个用到data的地方都会生成一个watcher，并将它保存到全局变量Dep.target中，watcher改变每一个观察者，Dep用来管理观察者。
然后在data的getter中将调用Dep的depend方法，将Dep.target中的watcher添加到此data对应的Dep中，完成依赖收集
在data被修改的时候，对应data的setter方法就会被出动，会调用Dep.notify()方法发布通知，调用每个watcher的uptade方法进行更新。