我们都知道，vue 最独特的特性之一，是非侵入性的响应式系统，数据模型仅仅是普通的 JavaScript 对象，而当我们修改它们时，视图会进行更新，其实就是让组件重新渲染。那么 vue 是怎样追踪到数据的变化并重新渲染组件的呢，看看官网的解释：
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
简单的说就是，vue 会遍历 data 对象的所有 property ，并使用一个 Object.defineProperty 的方法把遍历得到的 property 全部转化为用户不可见的 getter 和 setter 。
其次，每个组件都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当数据变化触发依赖项的 setter 时，会通知 watcher，从而使它关联的组件重新渲染。
图片搬运自官网 深入响应式原理
需要注意的是，Vue 不能检测数组和对象的变化，对此 vue 也给我们提供了一些方法：
对于对象
- Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的
- 对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property
对于数组
- Vue.set(vm.items, indexOfItem, newValue) 和 vm.items.splice(indexOfItem, 1, newValue) 用于利用索引直接设置一个数组项
- vm.items.splice(newLength) 用于修改数组的长度
官网有详细的使用方法，详情请见上面的链接，这里我就不再赘述啦，祝大家学习愉快！