双向数据绑定原理

60 阅读1分钟

1、app.message改变,view中如何监听message数据的改变[dep.notify()]

2、数据发生改变,Vue如何通知哪些人,并让界面刷新[dep.subs.forEach(watcher=> watcher.update())]

双向数据绑定主要通过数据劫持和发布订阅模式实现。

Object.defineProperty

数据劫持主要使用了 Object.defineProperty(obj, key, describe)方法:

  1. 主要用于对象属性的设置/操作,在一个对象上定义一个新属性,或者修改一个已经存在的属性
  2. obj 给什么对象操作属性
  3. key 操作obj对象的key属性
  4. describe 配置项,对象形式,包含5个属性:
  • enumerable:可枚举性,即定义的这个属性能通过for in 遍历到么
  • wirtable: 可重写性
  • configurable: 是否可再次修改配置项
  • get: 读取属性时调用的方法,需return一个具体值
  • set: 修改属性时调用的方法
  • value: 当前值

image.png

Vue双向数据绑定过程

主要通过两大方法。两大类来实现。 两大方法:

  • Observe:将数据添加到响应式系统中,数据劫持,发布订阅
  • Compile: 解析el模板,获取watcher,添加订阅

两大类:

  • Dep:每个data中的属性都有一个dep对象,用于管理和发布订阅
  • Watcher: 模板中,每使用到data中数据的v-model或者{{}}都是一个watcher,实例化Watcher会调用其update方法,该方法会获取data值,触发数据劫持中get,将该watcher作为订阅者添加到对应的dep中

image.png

源码

image.png

image.png

image.png

image.png

待补充Compile

image.png