响应式原理

# 深入响应式原理（双向绑定）

转载自掘金 ——前端森林

### 双向绑定的关键角色

```

Observer: 它的作用是给对象的属性添加getter和setter，用于依赖收集和派发更新

Dep: 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个Dep实例（里面subs是Watcher实例数组）,当数据有变更时,会通过dep.notify()通知各个watcher。

Watcher: 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed watcher),侦听器 watcher（user watcher）三种

```

### Watcher 和 Dep 的关系

```

Vue的响应式原理是通过Object.defineProperty实现的。被Object.defineProperty绑定过的对象，会变成「响应式」化。也就是改变这个对象的时候会触发get和set事件。

dep是用来依赖管理的，每个响应式数据都有一个dep来管理它的依赖

```

### 响应式核心设计思路

```

当创建Vue实例的时候，vue会遍历data选项的属性，利用Object.defineProperty为属性添加getter和setter对数据读取进行劫持，并且在内部追踪依赖，在属性被访问和修改时通知变化。

每个实例都会有相应的watcher实例，会在组件渲染的过程中记录依赖的所有数据属性（进行依赖收集,还有computed watcher,user watcher实例）,之后依赖项被改动时,setter方法会通知依赖与此data的watcher实例重新计算（派发更新）,从而使它关联的组件重新渲染

```