Vue响应式原理

 　　追踪变化

　　　　当把一个普通的JavaScript对象传给vue实例的打他选项时，vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性，这也就是为什么vue不支持IE8以及更低版本浏览器

　　　　这些getter/setter对用户来说是不可见的，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。【注意】浏览器控制台在打印数据对象时，getter/setter的格式化并不同，所以你可能需要安装vue-devtools来获取更加友好的检查接口

　　　　每个组件实例都有相应的watcher实例对象，它会在渲染的过程中 把属性记录为依赖，之后当依赖项setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新

　　检测变化

　　　　受现代js的限制，vue不能检测到对象属性的添加和删除。由于vue会在初始化实例时对属性执行getter/setter转化，所以属性必须在data对象上才能让vue转化它，这样才能让它是响应的     

　　　　Vue不允许在已经创建的实例上动态的添加新的根级组件响应属性，然而可以通过vue.set(object,key,value)方法将响应式的属性添加到嵌套的对象上，也可以使用this.$set(this.object,key,value)

　　声明响应式组件

　　　　由于vue不允许动态的添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性。这样限制的原因是，它消除了在依赖项跟踪系统中的一类边界情况，也使vue实例在类型检查系统的帮助下运行的更高效。在代码可维护方面也有一点重要的考虑：data对象就像组件状态的概要，提前声明所有的响应式属性，也可以让组件代码在以后阅读或其他开发人员阅读时更易于被理解

　　异步更新队列

　　　　Vue异步执行DOM更新，只要观察到数据变化，vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。