不推荐在组件内部直接修改 v-model 的值，因其破坏单向数据流，导致父状态隐式篡改、调试困难、响应式失效；应通过 computed 封装 getter/setter 并 emit 更新事件。
不推荐在组件内部直接修改 v-model 的值，是因为这会破坏 Vue 的单向数据流原则，导致父组件状态被隐式篡改，调试困难、逻辑混乱、响应式失效甚至出现视图不同步。
违背单向数据流，引发隐式副作用
Vue 设计哲学强调“数据向下，事件向上”。v-model 本质是语法糖，对应 :modelValue（父传子） + @update:modelValue（子通知父）。若子组件直接修改 props.modelValue（比如赋值给 ref 后再改），等于绕过事件机制强行改父状态——这不是响应式更新，而是非法覆盖，Vue 会警告且无法触发父组件重渲染。
- 原始值（string/number/boolean）作为 prop 传入时，子组件拿到的是副本，修改本地变量不影响父组件，但容易误以为“已同步”
- 对象或数组虽可被修改属性，但属于意外的双向耦合，父组件无法感知、无法拦截、无法校验
- 多个子组件共用同一数据源时，任意一个直接改值都会引发竞态和不可预测行为
正确做法：用计算属性封装读写逻辑
子组件应通过 computed 暴露一个带 getter 和 setter 的绑定值，getter 返回 props.modelValue，setter 触发 emit('update:modelValue', newValue)。这样既保持 UI 响应，又确保所有变更都经由明确事件通道回传。
- 避免使用
const value = ref(props.modelValue)这类一次性快照，它断开了后续响应式连接 - setter 中可加入类型校验、格式化（如转数字）、防抖等逻辑，提升健壮性
- 模板中绑定该计算属性，而非直接绑定
props.modelValue
重置时别替换整个响应式对象
父组件若需重置表单，不能写 formData = reactive({ ...initial })，这会创建新对象，切断与子组件的响应式关联。应原地赋值：
formData.productCount = 0formData.firstname = ''- 或用
Object.assign(formData, initialFormData)
子组件监听 props.modelValue 变化后，计算属性 getter 自动返回新值，input 等元素也会随之更新。
特殊场景：文件上传组件要主动清空 DOM
原生 <input type="file"> 不支持 :value 设置，所以即使父组件设 v-model="null"，输入框仍显示旧文件名。子组件必须：
- 接收
modelValueprop（如 File 对象或 null） - 在
watch或onUpdated中检测到null时，手动执行fileInput.value = '' - 同时重置内部预览状态（如图片 URL、文件名显示）
否则 v-model 表面“绑定了”，UI 却卡在旧状态，用户误以为没生效。
