浅谈vuejs深入响应式原理

概述

　　响应式系统是Vue最明显的特性之一，其数据模型即是最普通的JavaScript对象。当读取或者写入时，它的view视图会进行相对应的操作。

追踪变化

　　这里要了解原理，首先还需要了解Object.defineProperty(obj,prop,data)方法，这个方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。这个API是实现响应式原理的关键。

　　描述：当将一个js对象传入Vue实例作为data选项，Vue会遍历此对象所有的属性，并使用Object.defineProperty（）把这些属性全部转为getter/setter。

　　内部实现机制设想：

　　getter：主要是对于data选项的依赖的收集，每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。

　　setter：根据更新的数据，当依赖项的 setter 触发时，会通知watcher，从而使关联的组件更新视图（view）。