Vue 数据响应式

数据响应式是是什么？

响应式就是对外界变化做出反应的一种形式；

const vm = new Vue({data:{n: 0}})

当修改 vm.n 或 data.n 时，render(data...) 中的 n 就会做出响应。响应这个联动的过程就是 vue 的 数据响应式。

Object.defineProperty

我们通过 Object.defineProperty 来实现数据响应式。

• 可以给对象添加属性value
• 可以给对象添加getter/setter
• getter/setter用于对属性的读写进行监控

响应式的过程

1. 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

2. 这些getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在属性被访问和修改时通知变更。

3. 这里需要注意的是不同浏览器在控制台打印数据对象时对 getter/setter 的格式化并不同。

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

❗❗❗ Object.defineProperty是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。