vue2的响应式原理

vue2的响应式原理

1. Vue2 内部使用了 Object.defineProperty() 来实现双向绑定，通过这个方法可以给对应的属性添加get和set方法,访问属性会触发get,设置属性会触发set
2. vue的内部声明了一个叫做Observer的函数,这个函数的作用是用来劫持vue的data属性,但是由于data中又会存在复杂数据类型,需要深度递归劫持,在刚刚的Obser基础上,再声明一个函数,defineReactive用于递归劫持子属性
3. 通过上面两个方法劫持到了属性的get和set以后,需要给数据添加发布订阅流程,内部声明了一个叫做watcher的类,用于订阅属性的变化,在这个watcher中,添加update更新的方法,实例化整个watcher,订阅需要变化的属性
4. 声明watcher之后,和劫持的数据耦合依赖度比较高,所以还需要声明一个叫做Dep的类,用于解发布和订阅者的耦合,Dep中声明subs属性,储存订阅者实例,声明addSub来添加订阅者,notify用于在数据变化的时候,通知订阅者,在notify中调用Update实例的,以后被劫持的属性赋值的时候,会触发set方法的调用,set中调用notify,订阅属性的时候,会触发get方法,在get方法中,调用Dep的addSub方法添加订阅者