17370845950

答案：通过Proxy实现数据劫持，在get中收集依赖，set中触发更新，结合effect函数建立响应式系统，实现数据变化自动更新视图。

数据绑定和响应式系统是现代前端框架的核心，比如 Vue 和 React 都在不同层面实现了类似机制。JavaScript 中的响应式原理本质上是“当数据变化时，自动更新相关的视图或副作用”。下面我们从基础出发，一步步实现一个简单的响应式系统。

1. 什么是数据绑定与响应式？

数据绑定是指将数据与视图关联起来，当数据变化时，视图自动更新（双向或单向）。响应式则是指系统能自动追踪依赖，并在数据变动时触发相应的更新逻辑。

例如：

let name = 'Alice';
document.getElementById('app').innerText = name;

如果 name 变了，我们希望页面内容也自动更新——这就是响应式要解决的问题。

2. 使用 Proxy 实现响应式数据劫持

ES6 的 Proxy 能拦截对象的操作，非常适合用来监听数据读取和修改。

基本结构如下：

function reactive(obj) {
  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 + 依赖收集 + 副作用执行，就能实现高效的数据驱动更新。