Vue响应式原理分析
内容提要
Vue响应式原理：Dep表示依赖，Watcher是订阅者，Observer递归处理响应式数据。数据读取时getter通过Dep.target建立Dep与Watcher的多对多关系；数据更新时setter调用dep.notify通知订阅者更新。Watcher分watch、computed和渲染函数三类，渲染Watcher更新视图，实现数据变化自动刷新页面。
延伸解读
Dep 与 Watcher 的多对多关系
Dep 代表依赖，Watcher 是订阅者。每个响应式数据对应一个 Dep，而一个 Watcher 可以订阅多个 Dep，一个 Dep 也可以被多个 Watcher 订阅，形成多对多关系。Dep 的 subs 数组存放订阅者，Watcher 的 deps 数组存放依赖，两者互相记录，便于在移除时更新关联对象。这种设计是 Vue 响应式系统的基础。
依赖收集与触发更新的流程
在 Watcher 回调执行前，Vue 会通过 Dep.target 保存当前 Watcher。当回调中读取响应式数据时，触发 getter，getter 中调用 dep.depend() 将当前 Watcher 添加到 Dep 的订阅列表。数据更新时触发 setter，setter 调用 dep.notify() 通知所有订阅者，Watcher 的 update 方法被调用，最终执行回调更新视图。
Watcher 的三种类型与更新机制
Watcher 分为 watch、computed 和渲染函数三类。渲染 Watcher 负责更新视图，computed Watcher 具有 lazy 特性，在依赖变化时仅标记 dirty，下次访问时重新计算。更新时，Watcher 的 update 方法根据 lazy 和 sync 标志决定立即执行还是加入队列异步更新。渲染 Watcher 的更新最终触发组件重新渲染。
Observer 与递归响应式处理
Observer 负责将对象或数组递归转换为响应式。初始化时，Observer 的 walk 方法遍历对象属性，对每个属性调用 defineReactive 创建 Dep 并定义 getter/setter。对于数组，使用 observeArray 处理。被观察的对象会获得 __ob__ 属性作为标记。Observer 是响应式系统的入口，确保深层数据也能被追踪。
Q&A
Vue响应式原理中Dep和Watcher分别是什么？
Dep表示依赖，是响应式数据关联的对象，包含subs数组存储订阅者；Watcher是订阅者，能响应Dep的更新，分为watch、computed和渲染函数三类。
Vue如何建立Dep和Watcher之间的多对多关系？
在数据读取时，getter通过Dep.target获取当前Watcher，调用dep.depend()和watcher.addDep()互相添加，形成多对多关系。
Vue中数据更新时如何通知订阅者？
数据更新时setter调用dep.notify()，遍历subs数组中的每个Watcher，调用其update方法，进而触发更新。
Vue的Watcher有哪几种类型？
Watcher分为三种：watch、computed和渲染函数（render watcher）。渲染Watcher负责更新视图，实现数据变化自动刷新页面。
Observer在Vue响应式系统中起什么作用？
Observer负责递归处理对象或数组，将其转换为响应式数据。通过walk方法处理对象属性，observeArray处理数组，被观察的对象会带有__ob__属性。
Vue响应式原理中Dep.target是如何设置的？
在Watcher的get方法中，通过pushTarget设置Dep.target为当前Watcher，这样在数据getter中就能知道是哪个Watcher在读取数据，从而建立依赖关系。
