《源码系列》助你理解vue响应式源码——实现Watcher观察者

本文介绍了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的双向数据绑定通过这四个部分的协作实现了数据与视图的同步。