Vue.js 响应式系统中单向数据流与数据劫持的协同

Vue响应式系统基于单向数据流与数据劫持协同工作：数据变更触发setter→收集依赖→通知更新；v-model是事件监听+手动赋值的语法糖，不违背单向原则。

Vue 的响应式系统不是靠“双向绑定”实现视图同步，而是用单向数据流 + 数据劫持协同工作：数据变 → 触发劫持逻辑 → 收集依赖 → 通知更新。v-model 看似双向，实则是事件监听 + 手动赋值的封装，全程不违背单向原则。

单向数据流是设计约束，不是技术限制

Vue 明确要求 props 只读、子组件不能直接修改父传来的数据。这不是为了增加开发难度，而是让状态变更可追溯——所有修改必须发生在源头（父组件 data），再通过重新传值向下驱动。这种约束配合响应式劫持，能保证：

• 任意时刻都能通过 devtools 查看谁触发了哪次更新
• 父子组件间不会因意外赋值导致状态撕裂
• 计算属性、watch 等副作用逻辑只响应真实的数据变更，而非 DOM 操作本身

数据劫持是单向流的技术支撑

Object.defineProperty（Vue 2）或 Proxy（Vue 3）拦截的是“数据被写入”这个动作，而不是“输入框内容变了”。它不管用户怎么操作 DOM，只关心 JavaScript 层面的赋值行为：

• 当 this.msg = 'new' 执行时，setter 被触发，Dep 通知相关 Watcher 更新
• 当用户在 input 中打字，并不会自动改 this.msg；必须有事件处理器（如 @input）显式执行赋值
• v-model 就是把这两步（监听 input + this.msg = e.target.value）打包成一行语法，没绕过劫持机制

劫持与事件分工明确，各司其职

响应式系统只负责“数据改了之后怎么办”，而用户交互由事件系统承接：

立即学习“前端免费学习笔记（深入）”；

• 数据劫持管“谁变了”和“通知谁”：setter 触发 → Dep 遍历 Watcher → Watcher 执行 update()
• 事件系统管“为什么变”：input/change 等事件提供原始值，开发者决定是否、何时、如何赋值
• 二者配合，才形成“输入→更新→重渲染”的完整链路，但每一步都清晰可控

自定义组件中 v-model 的协作模式

在子组件里使用 v-model，本质仍是单向流的延伸：

• 父组件传入 :model-value="parentData"（Vue 3）或 :value="parentData"（Vue 2）
• 子组件内部通过 emit('update:modelValue', newValue) 或 emit('input', newValue) 通知父组件
• 父组件收到后，自行决定是否执行 parentData = newValue —— 劫持在此刻生效，视图随之更新