上一篇我们实现了数据到视图的映射，这一篇我们`实现数据驱动`，当数据改变的时候，我们无需手动操作 DOM ，视图会自动更新。

模拟更新

现在当我们改变数据的时候，data 数据源已经改变了，但是视图并没有改变，需要手动调用 vm._update(vm._render()) 才能更新视图，所以我们需要一个机制在数据变动的时候自动去更新。

一、定义 Watcher

src/observer/watcher.js

js 复制代码

// 全局变量 id 每次 new Watcher 都会自增
let id = 0;

class Watcher {
	constructor(vm,exprOrFn, cb, options) {
		this.vm = vm;
		this.exprOrFn = exprOrFn;
		this.cb = cb; //回调函数 比如在watcher更新之前可以执行beforeUpdate方法
		this.options = options; //额外的选项 true代表渲染watcher
		this.id = id++;
		if (typeof exprOrFn === 'function') {
			this.getter = exprOrFn;
		}
		this.get();
	}

	get () {
		this.getter();
	}
}

export default Watcher;

在 observer 文件夹下新建 watcher.js 代表和观察者相关这里首先介绍 Vue 里面使用到的观察者模式，我们可以把 Watcher 当做观察者它需要订阅数据的变动当数据变动之后通知它去执行某些方法其实本质就是一个构造函数初始化的时候会去执行 get 方法

二、创建渲染 Watcher

src/lifecycle.js

在组件挂载方法里面定义一个渲染 Watcher 主要功能就是执行核心渲染页面的方法

三、定义 Dep

src/observer/dep.js

Dep 是一个构造函数，可以把他理解为观察者模式里面的被观察者在 subs 里面收集 watcher ；当数据变动的时候通知自身 subs 所有的 watcher 更新；

四、对象的依赖收集

Object.defineProperty数据劫持核心兼容性在ie9以及以上

src/observer/index.js

上诉代码就是依赖收集和派发更新的核心其实就是在数据被访问的时候把我们定义好的渲染 Watcher 放到 dep 的 subs 数组里面同时把 dep 实例对象也放到渲染 Watcher 里面去数据更新时就可以通知 dep 的 subs 存储的 watcher 更新

五、完善watcher

src/observer/watcher.js

watcher 在调用 getter 方法前后分别把自身赋值给 Dep.target 方便进行依赖收集；

六、完善 dep

src/observer/dep.js

定义相关的方法把收集依赖的同时把自身也放到 watcher 的 deps 容器里面去

这时对象的更新已经可以满足了但是如果是数组类似{a: $1,2,3$ } a.push(4) 并不会触发自动更新因为我们数组并没有收集依赖

七、数组的依赖收集

childOb 就是Observer实例，表示属性的值依然是一个对象包含数组和对象 childOb指代的就是Observer实例对象里面的dep进行依赖收集
比如{a: $1,2,3$ } 属性a对应的值是一个数组观测数组的返回值就是对应数组的Observer实例对象
e.__ob__代表e已经被响应式观测了但是没有收集依赖所以把他们收集到自己的Observer实例的dep里面