双向绑定本质是数据与视图的自动同步，通过数据劫持（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"，其实等价于：
立即学习“Java免费学习笔记（深入）”；
-
绑定显示值：
: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 事件，就能理清来龙去脉。
