Proxy不能直接拦截HTML元素，只能代理JS对象；需用Proxy包裹数据对象，在set拦截中手动同步DOM，如通过data-bind映射更新textContent或value。
Proxy 不能直接用于 HTML 元素，得先明确作用域
HTML 本身没有 Proxy 概念，Proxy 是 JavaScript 的语言特性，只能拦截 JS 对象的读写操作。所谓“数据变化自动更新视图”，本质是：用 Proxy 包裹数据对象 → 在 set 拦截中触发 DOM 更新逻辑 → 手动修改对应 innerHTML、value 或属性。浏览器不会因为用了 Proxy 就自动重绘。
最简可行的 set 拦截 + 视图更新模式
核心在于把 DOM 节点和数据字段建立映射关系，否则 Proxy 不知道该更新哪块 HTML。常见做法是约定命名（如 data-xxx 属性）或显式绑定：
- 给需要响应的元素加
data-bind="userName"，表示它应显示state.userName - 在
set拦截里查所有[data-bind]元素，比对data-bind值是否等于被修改的 key - 匹配成功则调用
el.textContent = value或el.value = value
示例片段：
const state = new Proxy({ userName: 'Alice' }, {
set(obj, key, value) {
obj[key] = value;
// 查找所有绑定该字段的元素
document.querySelectorAll(`[data-bind="${key}"]`).forEach(el => {
if ('value' in el) el.value = value;
else el.textContent = value;
});
return true;
}
});
为什么直接代理 DOM 元素会失败
有人尝试 new Proxy(document.getElementById('input'), {...})，这行不通：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
Proxy只能代理普通对象，DOM 元素是宿主对象（host object），其属性访问由浏览器底层控制，get/set拦截器根本不会触发 - 像
el.value这种属性是 accessor property，走的是 DOM 接口定义，不经过 JS 层的 [[Get]] / [[Set]] - 错误现象：赋值无反应、控制台没日志、
set回调完全不执行
真实项目中必须绕过的坑
纯 Proxy + 手动 DOM 操作只适合极小原型。实际要用，得处理这些：
- 嵌套对象：默认
Proxy不递归代理，state.user.profile.name改变时，外层set拦不到，需在get中对对象返回新Proxy - 数组索引赋值（
arr[0] = x）会被拦截，但push、splice等方法不会触发set，得重写或监听length和索引变化 - 批量更新时反复刷 DOM 性能差，应加防抖或收集变更后统一 patch（类似 Vue 的 queueFlush）
-
data-bind方式无法处理表达式（如{{ user.name.toUpperCase() }}），得引入解析器或限制为纯字段名
真正稳定的方案不是从头手写 Proxy，而是用已处理好上述问题的库（如 SolidJS 的响应式系统），或者至少复用其核心思路：依赖收集 + 调度更新。自己实现时，最容易被忽略的是嵌套对象的代理穿透和数组方法的劫持缺失。
