JavaScript数据绑定核心是让数据变化自动触发视图更新；需区分响应式数据流与模板语法的双向绑定，Proxy实现依赖收集与触发，但仅代理第一层且不兼容IE11。
updateView()。原生实现有明确路径，但选框架前得先看清：你真正需要的是“响应式数据流”，还是“带模板语法的双向绑定”？这两者常被混为一谈，但技术选型差别很大。
用 Proxy 写一个最小可用的响应式系统
这是现代（Vue 3、Solid、Qwik 等）底层逻辑的简化版，能跑通依赖收集 + 自动触发，且支持动态属性增删、数组索引赋值。
let activeEffect = null;
const targetMap = new WeakMap();
function effect(fn) {
activeEffect = fn;
fn();
activeEffect = null;
}
function track(target, key) {
if (!activeEffect) return;
let depsMap = targetMap.get(target);
if (!depsMap) targetMap.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 = targetMap.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 Reflect.get(target, key);
},
set(target, key, value) {
const result = Reflect.set(target, key, value);
trigger(target, key);
return result;
}
});
}
- 必须在
effect()执行期间读取响应式数据，才能完成依赖收集；单独访问state.count不会注册任何监听 -
reactive()只代理第一层对象，嵌套对象需手动再reactive()—— 这不是 bug，是设计选择（Vue 3 也如此） - 不兼容 IE11，
Proxy是硬性门槛；若需兼容老浏览器，只能退回到Object.defineProperty，但会丢失对新增属性、数组索引修改的监听
为什么不要自己封装“类 Vue”的双向绑定框架
表面看 v-model 很简单：输入框改数据，数据改输入框。但真实场景里，你要处理：
- 不同表单控件（
input[type=checkbox]、select[multiple]、contenteditable）的值获取/设置逻辑完全不同 - 输入防抖、格式化（如金额输入）、异步校验失败时的数据回滚
- 表单级的脏检查（
isDirty）、提交状态、错误聚合 - 与第三方 UI 库（如 Ant Design、Mantine）的集成成本——它们通常自带表单体系
这些不是“加个 oninput 监听器”就能解决的。轮子造出来容易，维护三年还不出错很难。
主流响应式框架怎么选：按需求切一刀
别看名字都带“响应式”，它们解决的问题域其实很不同：
立即学习“Java免费学习笔记（深入）”；
-
Vue：适合需要模板语法 + 渐进式升级的项目。
ref()/reactive()+{{ }}是最接近“开箱即用数据绑定”的体验；但它的响应式是运行时的，打包体积和启动速度不如编译时方案 -
Solid：编译时响应式，生成纯函数组件，性能接近手写 DOM 操作。没有虚拟 DOM，也没有
setState概念；但生态小，调试工具链弱，学习曲线陡 -
Preact + Signals（如
@preact/signals）：轻量（3kb），信号模型比 Vue 的响应式更细粒度，适合微前端或嵌入式场景；但不提供模板，要自己拼 JSX 或 HTML 字符串 -
RxJS：不是 UI 框架，而是响应式流库。适合处理复杂异步交互（如搜索联想、多步骤表单、实时协作），但和 DOM 绑定需额外桥接（如
rxjs-dom）
注意：React 本身不内置响应式系统。它的“响应式”靠 useState + useEffect + 虚拟 DOM diff 实现，本质是“状态驱动重渲染”，不是属性劫持。强行给 React 对象加 Proxy 反而破坏其设计哲学，容易引发不可预测的 rerender。
最容易被忽略的坑：响应式 ≠ 实时
很多开发者以为用了 reactive()，数据一变 DOM 就立刻刷新——但实际中，你常遇到：
- 异步操作后忘记在
setTimeout或Promise.then里更新响应式变量（Proxy拦截不到 microtask 外的赋值） - 直接替换整个响应式对象（
state = { count: 2 }），导致原有依赖失效（必须用Object.assign(state, { count: 2 })或解构更新） - 在非
effect函数中调用trigger()，但没对应track()，等于白通知
响应式系统不是魔法，它只在你严格遵循“读取时收集、修改时触发”这个契约时才可靠。一旦跳出这个闭环，就得靠手动 forceUpdate 或重构逻辑来补救。
