vue的响应式系统

一、原文链接
Vue官方文档-深入响应式原理
二、摘录
1.用户对应用数据的改变，会引起数据状态的变化，view model会通过框架的响应式系统完成更新。
2.追踪变化
（1） 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty把这些属性全部转为 getter/setter

（2） 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据属性记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

（3）受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的

（4）对于已经创建的实例，Vue 不允许动态添加根级响应式属性，所以必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值
原因：它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑：data 对象就像组件状态的结构 (schema)。提前声明所有的响应式属性，可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。

（4）可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

• Vue.set(vm.someObject, 'b', 2)
  您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：
• this.$set(this.someObject,'b',2)

（5）为已有对象赋值多个新属性，，应该用原对象与要混合进去的对象的属性一起创建一个新的对象。

• // 代替 Object.assign(this.someObject, { a: 1, b: 2 })
• this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

vue响应式系统