如何利用ES6 Class实现响应式数据绑定？-js教程-PHP中文网

es6 class 本身不提供响应式能力，需结合 proxy 或 object.defineproperty 实现；推荐用 proxy 封装，在构造函数中返回代理对象，通过 get 收集依赖、set 触发更新，并对嵌套对象递归代理。

如何利用es6 class实现响应式数据绑定？

ES6 Class 本身不提供响应式能力，但可以结合 Proxy 或 Object.defineProperty 封装成可监听数据变化的类。核心思路是：用 Class 管理状态结构，用代理机制拦截读写操作，触发视图更新。

用 Proxy 封装响应式 Class（推荐）

Proxy 更强大、更灵活，能监听新增/删除属性、数组索引访问等，适合现代响应式实现。

在 Class 构造函数中，用 new Proxy(this, handler) 包裹实例，把原始对象设为代理目标
定义 get 拦截器：收集依赖（如当前正在执行的渲染函数），可用 WeakMap 存储 key → effect 映射
定义 set 拦截器：赋值后遍历触发对应 key 的所有 effect 函数（即更新 DOM 或重新计算）
为避免重复代理嵌套对象，get 中对返回值是对象的属性自动递归代理（懒代理）

封装一个简易 Reactive 类示例

以下是一个最小可行实现，不依赖框架，仅用原生 JS：

class Reactive {
  constructor(data) {
    this._data = data;
    return new Proxy(this._data, {
      get: (target, key) => {
        // 这里可接入依赖收集（例如：activeEffect && track(target, key)）
        const value = target[key];
        return typeof value === 'object' && value !== null
          ? new Proxy(value, this)
          : value;
      },
      set: (target, key, value) => {
        target[key] = value;
        // 这里可触发更新（例如：trigger(target, key)）
        console.log(`响应式更新: ${key} =`, value);
        return true;
      }
    });
  }
}

使用时：const state = new Reactive({ count: 0, name: 'Vue' });，后续修改 state.count++ 即可被拦截。

ES6-ES11新特性相关课件

下载

配合模板更新实现双向绑定

Class 提供数据，还需连接视图。常见做法：

在 set 拦截器中调用 render() 或触发自定义事件（如 dispatchEvent(new CustomEvent('change'))）
为 input 元素添加 input 监听，将用户输入同步回响应式对象（state.xxx = e.target.value）
用 document.querySelector 找到对应节点，用 innerHTML / textContent 更新文本内容