vue学习记录之响应式原理

Vue官网介绍其是一款用于构建用户界面的渐进式框架，易于上手，使用于可以专注于视图层的开发。
复制代码

之前因为项目需求，接触了Vue2.0，不得不说，vue的响应性系统能及时将变化后的节后快速渲染到页面，极大提高了开发效率。下面来说说Vue的响应式原理：

上图是Vue官网提供的实现响应的过程图： Vue遍历一个Vue实例对象的data对象的所有property，使用 Object.defineProperty将所有property 全部转为 getter/setter，每个组件实例都对应一个 watcher 实例，它可以用于监听setter的触发，将变化后的结果渲染到组件上。 不过，需要特别说明的是，Vue 不能检测数组和对象的变化，但我们可以通过Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。另外为了一次性向对象添加多个属性，官网提供了用原对象与要混合进去的对象的 property 一起创建一个新的对象，例子如下：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
复制代码

而对于数组，也可以通过Vue.set来更新对应索引位置的值来实现数据响应。