vue响应式数据原理

191 阅读1分钟

image.png

  • 初始化Vue实例的时候,Observer遍历data里所有属性,使用Object.defineProperty()把所有的属性都添加上getter、setter方法,并创建Dep。
  • 在解析指令的时候,创建Watcher,并把更新函数绑定到Watcher的回调上。
  • 初始化视图时会读取属值,触发getter,把属性对应的Watcher添加到Dep中。
  • 当修改数据是会触发setter,调用Dep中的notify()方法,通知对应的Watcher更新视图。