JavaScript响应式编程核心是观察者模式，通过Proxy拦截get/set实现依赖收集与触发，或用Object.defineProperty兼容旧环境；其本质是Subject（响应式对象）与Observer（副作用函数）的自动关联。
JavaScript 中实现响应式编程，核心是让数据变化能自动触发相关逻辑（比如更新视图），而观察者模式正是支撑这一能力的经典设计模式之一。它不直接“监听”原始 JS 对象属性变化（ES5 无法拦截赋值），而是通过封装数据访问与修改过程，使依赖能被收集、变化时被通知。
用 Proxy 实现现代响应式（推荐）
ES6 的 Proxy 可以拦截对象的读取（get）和写入（set）操作，天然适合构建响应式系统：
- 在
get中收集当前正在执行的副作用函数（如渲染函数）作为依赖； - 在
set中触发所有已收集的依赖重新执行； - 支持嵌套对象、数组索引、新增/删除属性等场景（配合
Reflect）。
示例简版：
const effectStack = [];
function effect(fn) {
const e = () => { fn(); };
e();
return e;
}
function reactive(obj) {
const handler = {
get(target, key, receiver) {
track(target, key); // 收集依赖
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return result;
}
};
return new Proxy(obj, handler);
}
// 简化依赖管理（实际需 WeakMap + Map 结构）
const depsMap = new WeakMap();
function track(target, key) {
let deps = depsMap.get(target);
if (!deps) {
deps = new Map();
depsMap.set(target, deps);
}
let dep = deps.get(key);
if (!dep) {
dep = new Set();
deps.set(key, dep);
}
dep.add(activeEffect); // activeEffect 是当前正在执行的 effect 函数
}
function trigger(target, key) {
const deps = depsMap.get(target)?.get(key);
if (deps) deps.forEach(fn => fn());
}
用 Object.defineProperty 模拟（兼容旧环境）
ES5 仅支持对**已有属性**进行劫持，无法监听动态新增或删除，且对数组索引赋值、.length 修改等无效：
立即学习“Java免费学习笔记（深入）”；
- 需遍历对象初始属性，为每个可枚举属性定义
get和set； -
get中收集依赖（同 Proxy 方式）； -
set中触发依赖更新； - 数组需重写其原型方法（如 push、pop）来触发更新。
Vue 2 正是基于此实现，但局限明显，所以 Vue 3 切换到了 Proxy。
观察者模式的角色拆分：Subject 与 Observer
响应式本质是观察者模式的变体：
-
Subject（被观察者）：即响应式对象，内部维护依赖列表（observers），提供
notify()方法； - Observer（观察者）：即副作用函数（effect），执行时把自己注册到对应属性的依赖中；
- 当数据变化 → Subject 调用
notify()→ 所有 Observer 自动执行。
注意：这不是传统“主动订阅-发布”的手动调用模式，而是靠运行时依赖追踪（track）+ 响应式代理（Proxy）自动完成的隐式关联。
为什么不能直接监听普通对象？
JavaScript 普通对象没有变更通知机制：
-
obj.a = 123是静默赋值，JS 引擎不会广播事件； -
Object.observe已废弃； -
watch或onchange不适用于通用对象； - 因此必须借助 Proxy / defineProperty 封装访问逻辑，把“赋值动作”变成可控的“响应式设置”。
不复杂但容易忽略：响应式不是魔法，它依赖你用 reactive 包裹数据、用 effect 包裹副作用，并确保依赖在响应式上下文中被读取。
