追踪变化
当把一个普通的JavaScript对象传给vue实例的data选项时，vue将遍历对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。
这些getter/setter对用户来说是不可见的，但是在内部它们让Vuue追踪依赖，在属性访问的和修改时通知变化。【注意】浏览器控制台在打印数据对象时，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将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。
网友评论