VUE响应式原理

108 阅读1分钟
  1. 数据代理
    • 将data数据代理到实例对象上,遍历所有data数据,通过Object.defineProperty()方法将data中的数据定义到实例对象上
    • 内部通过get定义属性读取的方法,实际读取的是原数据data
    • 通过set定义属性设置的方法,实际设置的是原数据data
  2. 数据劫持
    • 遍历所有data数据,进行重新定义,将其定义成响应式
    • 通过Object.defineProperty()方法,重新定义get和set
    • 此时会通过闭包保存一个dep对象
    • get将来通过dep就能建立dep和watcher的联系
    • set将来通过dep就能通知所有watcher去更新用户界面
  3. 模版解析
    • 会创建watch实例,触发get方法收集所有dep和watch之间的关系
  4. 将元素节点转换成文档碎片节点
  5. 编译模版