答案：通过Proxy实现数据劫持，在get中收集依赖，set中触发更新，结合effect函数建立响应式系统，实现数据变化自动更新视图。
数据绑定和响应式系统是现代前端框架的核心，比如 Vue 和 React 都在不同层面实现了类似机制。JavaScript 中的响应式原理本质上是“当数据变化时，自动更新相关的视图或副作用”。下面我们从基础出发，一步步实现一个简单的响应式系统。
1. 什么是数据绑定与响应式？
数据绑定是指将数据与视图关联起来，当数据变化时，视图自动更新（双向或单向）。响应式则是指系统能自动追踪依赖，并在数据变动时触发相应的更新逻辑。
例如：
let name = 'Alice';document.getElementById('app').innerText = name;
如果 name 变了，我们希望页面内容也自动更新——这就是响应式要解决的问题。
立即学习“Java免费学习笔记（深入）”；
2. 使用 Proxy 实现响应式数据劫持
ES6 的 Proxy 能拦截对象的操作，非常适合用来监听数据读取和修改。
基本结构如下：
return new Proxy(obj, {
get(target, key) {
console.log(`访问 ${key}`);
return target[key];
},
set(target, key, value) {
console.log(`设置 ${key} 为 ${value}`);
target[key] = value;
// 触发更新
trigger();
return true;
}
});
}
3. 收集依赖与触发更新
要实现真正的响应式，我们需要在读取数据时收集依赖（即哪些函数用了这个数据），在数据变化时触发这些依赖。
使用两个关键函数：
- track()：在 get 中调用，用于收集当前正在执行的副作用函数
- trigger()：在 set 中调用，用于执行所有依赖的副作用函数
完整实现示例：
const targetsMap = new WeakMap();let activeEffect = null;
function effect(fn) {
activeEffect = fn;
fn();
activeEffect = null;
}
function track(target, key) {
if (!activeEffect) return;
let depsMap = targetsMap.get(target);
if (!depsMap) {
targetsMap.set(target, (depsMap = new Map()));
}
let dep = depsMap.get(key);
if (!dep) {
depsMap.set(key, (dep = new Set()));
}
dep.add(activeEffect);
}
function trigger(target, key) {
const depsMap = targetsMap.get(target);
if (!depsMap) return;
const dep = depsMap.get(key);
if (dep) {
dep.forEach(effect => effect());
}
}
function reactive(obj) {
return new Proxy(obj, {
get(target, key) {
track(target, key);
return target[key];
},
set(target, key, value) {
target[key] = value;
trigger(target, key);
return true;
}
});
}
4. 使用示例
现在我们可以测试这个响应式系统：
const state = reactive({ count: 0 });effect(() => {
console.log('count changed:', state.count);
});
state.count++; // 输出: count changed: 1
state.count++; // 输出: count changed: 2
每次 state.count 被读取时，会收集当前的 effect 函数；一旦被修改，就触发所有依赖它的 effect 重新执行。
基本上就这些。这套机制是 Vue 3 响应式的简化版核心。通过 Proxy + 依赖收集 + 副作用执行，就能实现高效的数据驱动更新。
