17370845950

双向绑定本质是数据与视图的自动同步，通过数据劫持（Object.defineProperty或Proxy）和事件监听（如input）实现；v-model是语法糖，等价于:value绑定加@input更新；需注意数组索引赋值、新增属性等响应式限制。

双向绑定本质是让数据变化自动更新视图，同时用户操作视图也能反向更新数据。JavaScript 中没有原生的双向绑定语法，它是通过监听数据变化 + 拦截用户输入 + 同步更新来模拟实现的。

核心原理：数据劫持 + 事件监听

主流实现（如 Vue 2）靠 Object.defineProperty 劫持对象属性的读写操作：

• get 时收集依赖（记录哪些视图用到了这个数据）
• set 时触发更新（通知所有依赖该数据的视图重新渲染）

Vue 3 改用 Proxy，能监听整个对象、新增/删除属性、数组索引等，能力更强、更彻底。

v-model 是语法糖，不是魔法

在 input、select、textarea 上写 v-model="msg"，其实等价于：

• 绑定显示值：:value="msg"
• 监听输入事件：@input="msg = $event.target.value"（或 @change 等）

自定义组件要支持 v-model，需同时接收 modelValue prop 并触发 update:modelValue 事件。

手动实现一个简易双向绑定（以 input 为例）

不用框架也能做，关键是把赋值和监听串起来：

• 用 Object.defineProperty 监听 data.msg 的变化，变化时更新 input.value
• 给 input 绑定 input 事件，输入时同步修改 data.msg
• 这样数据改 → 视图变，输入 → 数据变，形成闭环

注意边界与限制

双向绑定不是万能的，有些情况它不生效或需额外处理：

• 直接通过索引设置数组项（arr[0] = newVal）—— Vue 2 无法检测，需用 Vue.set 或 splice
• 添加新属性到响应式对象上（obj.newKey = val）—— 需用 Vue.set 或 reactive 包裹
• 原始值（string/number/boolean）不能直接响应式，必须包装成对象属性

基本上就这些。双向绑定是“监听 + 同步”的组合技，理解 get/set 或 Proxy 的拦截时机，再配上 DOM 事件，就能理清来龙去脉。