javaScript无原生双向绑定，需模拟：Object.defineProperty劫持属性读写（vue2），但无法监听新增属性、数组索引赋值及深度嵌套；proxy代理整个对象（vue3），支持动态属性和数组索引，但不兼容IE；Pub/Sub靠事件通知，适合跨模块通信；模板绑定依赖编译或运行时求值，需注意变量名错误、异步更新滞后等问题。
javascript 中没有原生的双向数据绑定机制，所谓“数据绑定”都是靠开发者用语言特性模拟出来的行为。能不能实现、怎么实现、性能如何，取决于你用的模式和场景。
Object.defineProperty 是最基础的响应式监听方式
它通过劫持对象属性的 get 和 set 实现读写拦截，是 Vue 2 的核心响应式原理。
常见错误现象：Object.defineProperty 无法监听新增属性或数组索引赋值（如 arr[1] = 'x'），也不能监听对象深度嵌套变化（除非递归定义）。
使用场景：轻量级 MVVM 小工具、需要兼容 IE9+ 的老项目。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 必须提前声明所有要响应的属性，否则后续
set不会触发更新 - 对数组需重写
push、pop等方法，才能捕获变更 - 避免对大量属性做 defineProperty，性能损耗明显
Proxy 可以替代 defineProperty 实现更完整的响应式
Proxy 能代理整个对象，支持动态属性、数组索引、in 操作符、遍历等，Vue 3 已全面切换至此。
常见错误现象：直接替换整个对象（如 obj = newObj）不会触发 set，因为 Proxy 只代理原对象引用；Proxy 不兼容 IE，且无法 polyfill。
实操建议：
- 用
Reflect.set在 handler 中保持默认行为，避免漏掉原始逻辑 - 深层嵌套对象仍需递归代理，但可以懒代理（首次访问时再代理子对象）
- 注意不要在
get中直接返回新对象，否则每次取值都新建，破坏响应依赖追踪
发布-订阅（Pub/Sub）适合跨组件/模块的数据同步
不依赖属性劫持，而是靠事件机制通知变更，常用于状态管理库（如早期的 Backbone.Events 或自研 Store）。
使用场景：松耦合模块通信、不需要细粒度响应、或与 dom 更新解耦（比如先改数据，再批量渲染）。
实操建议：
- 记得在销毁时
unsubscribe，否则容易内存泄漏 - 避免把整个数据对象作为 payload 发送，应只传 diff 或关键字段
- 和
Proxy结合能做出“自动订阅”效果：访问某字段时自动注册对应事件
基于模板字符串或 jsX 的声明式绑定需要运行时解析
像 {{ msg }} 或 {this.state.msg} 这类语法本身不绑定，真正起作用的是背后的编译器或运行时求值逻辑。
常见错误现象：模板中写错变量名不会报错，只渲染为空；异步更新后未触发重新求值，导致视图滞后。
实操建议：
- 优先用函数式更新（如
setState(prev => ({ count: prev.count + 1 }))），避免闭包 stale state - 若手写模板引擎，注意缓存 AST 或编译结果，否则每次 render 都解析字符串开销大
- 不要在模板表达式里调用副作用函数（如
{{ apiCall() }}），难以调试且重复执行
真正难的不是“怎么绑”，而是“什么时候该重新计算”和“谁该被通知”。过度监听或过早绑定，比没绑定还容易出问题。