vue 深入响应式原理

vue最显著的特性就是不太引人注意的响应式系统(reactivity system),模型层（model）只是普通的javascript对象,修改它则更新视图view。这会让状态管理变得非常简单且直观。

如何追踪变化？

把一个普通javascript对象传给vue实例的data选项，Vue将遍历此对象所有的属性，并用Object.defineProperty把这些属性全部转化为getter/setter。Object.defineProperty是仅支持ES5,且无法shim的特性。这也就是vue不支持ie8及更低版本的浏览器。

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

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

变化检测问题

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

var vm = new Vue({

data:{

a:1

}

})

 

// `vm.a` 是响应的

 

vm.b = 2

// `vm.b` 是非响应的

vue不允许在已经创建的实例上动态添加新的根级响应式属性（root-level reactivity property）。然而它可以使用vue.set(object,key,value)方法将响应属性添加到嵌套的对象上：

Vue.set(vm.someObject, 'b', 2)

 

你还可以使用vm.$set实例方法，这也是全局vue.set方法的别名。

this.$set(this.someObject,'b',2)

有时你想向已有对象上添加一些属性，例如使用object.assign()或_.extend()方法来添加属性。但是，添加到对象上的