vue组件中观察者模式天然存在——响应式数据、v-model、computed、watch均基于dep（主题）与watcher（观察者）协同工作：数据变化时dep通知所有watcher更新。
Vue 组件中观察者模式不是“用不用”的问题，而是它天然就在运行——只要用了响应式数据、v-model、computed 或 watch，就已处在观察者模式的机制之下。
响应式数据是观察者模式的底层载体
Vue 会把 data 中每个属性通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）封装成可追踪的响应式对象。这个过程背后有三个关键角色：
- Dep（依赖收集器）：作为“主题（Subject）”，每个响应式属性都对应一个 Dep 实例，负责维护当前属性被哪些 Watcher 依赖
-
Watcher：作为“观察者（Observer）”，在组件渲染、计算属性求值、
watch初始化等阶段被创建，执行时会主动“订阅”所访问的响应式字段 -
触发更新：当属性被修改，setter 触发，Dep 通知所有关联 Watcher 执行
update()，进而驱动视图重渲染或回调执行
v-model 和表单联动是典型的一对多监听
双向绑定表面看是语法糖，本质是一组观察者关系的协同：
- 输入框的
input事件 → 修改绑定数据 → 触发该数据的 Dep 通知 - 数据变化 → 所有依赖它的 Watcher（包括模板插值、其他计算属性、
watch回调）同步响应 - 多个组件或同一组件内多个地方使用同一个
ref或data字段，就构成了一对多的更新链
computed 和 watch 是面向开发者的观察者接口
它们把底层的观察者逻辑封装成易用的 API，但行为逻辑一致：
- 计算属性：初始化时作为 Watcher 运行一次，自动收集其函数体内读取的所有响应式依赖；任一依赖变化，就重新求值并触发依赖它的视图更新
- 侦听器 watch：显式声明“我关心这个值”，Vue 为其创建 Watcher，当目标值变化时执行回调——和事件监听类似，但绑定的是响应式状态而非 DOM 事件
- 两者都支持深度监听（
deep: true）和立即执行（immediate: true），本质是控制 Watcher 的依赖收集范围与触发时机
组件通信中隐含的观察者链路
父子组件之间 props / emit 不直接走响应式系统，但配合 watch 或 computed 就自然引入观察者行为：
- 子组件
watch: { '$props.someValue' }→ 监听父传 prop 变化，属于跨组件的观察者订阅 - 使用
provide / inject+ 响应式对象时，inject 的值若为 reactive，其内部变化仍会触发子孙组件中依赖它的 Watcher - 即便用事件总线（
mitt或 Vue 2 的空实例），它本身是发布-订阅模式；但一旦在事件回调里修改响应式数据，后续更新又回到观察者模式闭环中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
