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 —— 劫持在此刻生效，视图随之更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
