《源码系列》助你理解vue响应式源码——实现Watcher观察者
💡
原文中文，约3400字，阅读约需8分钟。
📝
内容提要
本文介绍了Vue中实现双向数据绑定的原理。主要由Compile、Observer、Dep、Watcher四部分组成。Compile用于初始化视图，解析指令并将对应的值渲染到页面上。Dep用于增加订阅者和通知Watcher更新视图。Watcher用于更新视图，比较新旧值并执行回调函数替换数据。Observer使用Object.defineProperty对数据进行监听，get方法进行依赖收集，set方法通知Dep中的观察者更新视图。
🎯
关键要点
- 本文介绍了Vue中实现双向数据绑定的原理，主要由Compile、Observer、Dep、Watcher四部分组成。
- Compile用于初始化视图，解析指令并将对应的值渲染到页面上。
- Dep用于增加订阅者和通知Watcher更新视图。
- Watcher用于更新视图，比较新旧值并执行回调函数替换数据。
- Observer使用Object.defineProperty对数据进行监听，get方法进行依赖收集，set方法通知Dep中的观察者更新视图。
- Dep类用于管理观察者，addSub方法增加观察者，notify方法通知观察者更新视图。
- Watcher类用于获取旧值和新值，update方法比较并回调更新视图。
- 在模版编译时创建Watcher实例并绑定更新函数，以实现数据变化时视图的更新。
- defineReactive方法通过Object.defineProperty实现数据的劫持监听，确保数据变化时通知观察者。
- Vue的双向数据绑定通过这四个部分的协作实现了数据与视图的同步。
➡️
