day44 vue响应式原理及双向绑定实现

vue响应式原理

vue2 响应式原理

• 当我们将一个普通的js对象传入vue实例的data选项,vue将遍历这个对象的所有属性，使用object.defineProprety将所有的属性都转为getter/setter,这样就可以让vue可以追踪依赖。

• 每一个组件实例都有一个watcher实例，它会将组件渲染过程中所有使用了data中数据属性的地方收集为依赖

• 当触发依赖项的setter触发时，就可以去触发watcher，从而重新渲染组件

双向绑定实现

参考链接

• vue的双向绑定是利用数据劫持结合发布者-订阅者模式来实现的

监听器observer

劫持并监听所有属性，如果有变化，就通知观察者

观察者watcher

每一个watcher都对应它的更新函数，当收到属性变化的通知，就会去执行相应的更新函数(通知compile去触发对应的更新)，进而实现视图的更新

订阅者compile

• 存放所有订阅了该属性的观察者对象
• 主要是解析模板的，将对应的 v-model v-on {{}}等指令(模板语法)初始化，并初始化相应的订阅者(是一个依赖的收集过程),绑定好更新函数