1、app.message改变,view中如何监听message数据的改变[dep.notify()]
2、数据发生改变,Vue如何通知哪些人,并让界面刷新[dep.subs.forEach(watcher=> watcher.update())]
双向数据绑定主要通过数据劫持和发布订阅模式实现。
Object.defineProperty
数据劫持主要使用了 Object.defineProperty(obj, key, describe)方法:
- 主要用于对象属性的设置/操作,在一个对象上定义一个新属性,或者修改一个已经存在的属性
- obj 给什么对象操作属性
- key 操作obj对象的key属性
- describe 配置项,对象形式,包含5个属性:
- enumerable:可枚举性,即定义的这个属性能通过for in 遍历到么
- wirtable: 可重写性
- configurable: 是否可再次修改配置项
- get: 读取属性时调用的方法,需return一个具体值
- set: 修改属性时调用的方法
- value: 当前值
Vue双向数据绑定过程
主要通过两大方法。两大类来实现。 两大方法:
- Observe:将数据添加到响应式系统中,数据劫持,发布订阅
- Compile: 解析el模板,获取watcher,添加订阅
两大类:
- Dep:每个data中的属性都有一个dep对象,用于管理和发布订阅
- Watcher: 模板中,每使用到data中数据的v-model或者{{}}都是一个watcher,实例化Watcher会调用其update方法,该方法会获取data值,触发数据劫持中get,将该watcher作为订阅者添加到对应的dep中
源码
待补充Compile