JavaScript数据绑定是通过Object.defineProperty或Proxy等特性模拟实现的；Proxy更灵活，支持数组索引、新增属性等，需递归代理嵌套对象；Vue 2因Object.defineProperty限制无法监听新增/删除属性、数组下标赋值等。
JavaScript 本身没有原生数据绑定机制，所谓“数据绑定”是靠开发者用语言特性（如 Object.defineProperty、Proxy、事件监听、模板解析等）组合实现的模拟行为。现代框架（Vue/React）的响应式核心也基于这些底层能力。
用 Proxy 拦截属性读写是最直接的方式
Proxy 能拦截对象的任意操作，比 Object.defineProperty 更灵活，支持数组索引、新增属性、delete 等场景。
- 必须用
new Proxy(obj, handler)包裹原始对象，不能直接改写原对象 -
get钩子里需触发依赖收集（比如把当前执行的渲染函数存进一个全局“副作用栈”） -
set钩子里需通知所有依赖该属性的函数重新执行 - 对嵌套对象也要递归代理，否则深层属性变化不会被拦截
const reactive = (obj) => {
return new Proxy(obj, {
get(target, key, receiver) {
track(target, key); // 收集依赖
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return result;
}
});
};
Object.defineProperty 在 Vue 2 中的局限性
Vue 2 用它实现响应式，但存在几个硬伤，现在仍会影响老项目维护或面试理解：
- 无法监听对象新增/删除属性（得用
Vue.set/Vue.delete） - 无法监听数组下标赋值（如
arr[0] = 1）和length变更 - 初始化时需遍历所有已有属性，性能开销随对象深度/广度增长
- 不支持 Map/Set 等原生集合类型
如果你在调试 Vue 2 项目时发现数据变了但视图没更新，先检查是不是用了上述不支持的操作。
立即学习“Java免费学习笔记（深入）”；
模板中绑定表达式如何关联到响应式逻辑？
所谓“{{ count + 1 }}”能自动更新，本质是：模板编译阶段把该表达式包装成一个函数，并在首次执行时读取 count —— 这个读取动作会触发 get 钩子，从而完成依赖注册。
- 每个绑定表达式对应一个独立的响应式副作用（effect）
- 如果表达式里访问了多个响应式字段（如
{{ a + b }}），它们都会被同时收集为该 effect 的依赖 - 字段变化时，只重跑它所依赖的那些 effect，不是全量刷新
- 注意避免在 effect 中产生新响应式读取（如异步回调里再读取字段），否则可能造成无限循环
真正难的不是写出一个能响应的 reactive 函数，而是处理好依赖清理、嵌套 effect、计算属性缓存、以及与异步任务（Promise、setTimeout）的时序配合——这些才是实际项目里出问题最多的地方。