Vue响应式系统中的observe、watcher、dep源码解析，能否详细阐述其工作原理和相互关系？

本文共计2491个文字，预计阅读时间需要10分钟。

Vue的响应式系统+Vue+独特特性的特点之一，是其非侵入性的响应式系统。数据模型仅是普通的JavaScript对象，而当您修改它们时，视图会自动更新。这使得状态管理非常直接且简单。

Vue的响应式系统

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象，而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接，我们可以只关注数据本身，而不用手动处理数据到视图的渲染，避免了繁琐的 DOM 操作，提高了开发效率。

vue 的响应式系统依赖于三个重要的类：Dep 类、Watcher 类、Observer 类，然后使用发布订阅模式的思想将他们揉合在一起（不了解发布订阅模式的可以看我之前的文章发布订阅模式与观察者模式）。

Observer

Observe扮演的角色是发布者，他的主要作用是调用defineReactive函数，在defineReactive函数中使用Object.defineProperty 方法对对象的每一个子属性进行数据劫持/监听。

部分代码展示

defineReactive函数，Observe的核心，劫持数据，在setter中向Dep（调度中心）添加观察者，在getter中通知观察者更新。