Vue 表单避坑：为什么 v-model 绑定对象属性会偷偷修改父组件数据？
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<h2 data-id="heading-0">场景引入</h2>
<p>在 Vue 项目里，表单组件几乎无处不在。为了提高复用性，我们常常会把一堆输入框封装成一个“大表单组件”，然后通过 <code>v-model</code> 直接绑定一个对象给外部组件：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><!-- App.vue -->
<script setup>
import { ref } from 'vue'
import MyForm from './MyForm.vue'
const data = ref({})
</script>
<template>
<MyForm v-model="data" />
</template></pre>
</div>
<p>在 <code>MyForm.vue</code> 里，我们定义一个 <code>model</code>，接着直接把 <code>model</code> 的属性绑定到 <code>MyInput</code> 上：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><!-- MyForm.vue -->
<script setup>
import MyInput from './MyInput.vue'
import { computed } from 'vue'
const props = defineProps({
modelValue: Object
});
const emit = defineEmits(['update:modelValue']);
const model = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v)
})
</script>
<template>
<div>开始：<MyInput v-model="model.start" /></div>
<div>结束：<MyInput v-model="model.end" /></div>
</template></pre>
</div>
<p>最后是简单的 <code>MyInput.vue</code>：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><!-- MyInput.vue -->
<script setup>
import { computed } from 'vue'
const props = defineProps({
modelValue: Number
});
const emit = defineEmits(['update:modelValue']);
const value = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v)
})
</script>
<template>
<span>
<span>{{ value }}</span>
<button @click="value = Date.now()">更新</button>
</span>
</template></pre>
</div>
<div>
<div>
<p>看起来一气呵成，干净又优雅，不是吗？</p>
<p><strong>然而，这段代码已经违背了单向数据流原则。</strong></p>
<h2 data-id="heading-1">先做个实验：把 v-model 换成 :model-value</h2>
<p>把 <code>App.vue</code> 里的 <code>v-model</code> 改成 <code>:model-value</code>（也就是只传 prop，不监听 <code>update</code> 事件）：</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><!-- App.vue -->
<script setup>
import { ref } from 'vue'
import MyForm from './MyForm.vue'
const data = ref({})
</script>
<template>
<MyForm :model-value="data" />
</template></pre>
</div>
<div>
<div>
<p>按常理，此时 <code>data</code> 不应该被子组件修改，因为父组件没有监听 <code>update</code> 事件。</p>
<p>但是点击按钮后你会发现——<strong><code>data</code> 还是被改了！</strong> （不信可以去 Vue Playground 试试）</p>
<p>这就怪了，明明没有监听 <code>update</code> 事件，数据怎么变的？<strong>因为子组件直接修改了同一个对象的属性，绕过了事件机制。</strong></p>
<h2 data-id="heading-2">问题的本质：v-model 直接绑定属性值时发生了什么？</h2>
<p>在 <code>MyForm.vue</code> 中，我们写了 <code><MyInput v-model="model.start" /></code>。<code>v-model="model.start"</code> 在 Vue 3 中会被展开为：</p>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><MyInput
:model-value="model.start"
@update:model-value="v => model.start = v"
/></pre>
</div>
<div>
<div>
<p><code>model.start</code> 是什么？是 <code>modelValue</code> 的一个属性，直接指向父组件的 <code>data</code>。所以 <code>v => model.start = v</code> 这一赋值<strong>直接修改了父组件的对象属性</strong>，根本没有触发 <code>MyForm.vue</code> 的 <code>update:model-value</code> 事件。</p>
<p>换句话说，<code>MyForm.vue</code> 没有发出 <code>update:model-value</code> 事件，<code>App.vue</code> 完全不知道自己数据已经被改了。</p>
<hr>
<p>你还可以把 <code>MyForm.vue</code> 中的 <code>model</code> 调整为</p>
</div>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">const model = computed({
get: () => props.modelValue,
set: (v) => {
console.log('MyForm.vue update:modelValue', v)
emit('update:modelValue', v)
}
})</pre>
</div>
<div>
<div>
<p>在控制台里，没有输出内容。<code>console.log('MyForm.vue update:modelValue', v)</code> 完全不会执行到</p>
<h2 data-id="heading-3">单向数据流到底是什么？</h2>
<p>Vue 的单向数据流规定：</p>
<ul>
<li>父组件通过 <strong>props</strong> 把数据交给子组件。</li>
<li>子组件不能直接修改 props，必须通过 <strong>emit 事件</strong> 通知父组件，由父组件自己修改数据。</li>
<li>数据永远是从父 → 子，事件是从子 → 父。</li>
</ul>
<p><code>v-model</code> 本身是符合单向数据流的——前提是你<strong>通过事件更新的是整个数据</strong>，而不是直接修改对象的属性。</p>
<p>在上面的例子中，虽然我们用了 <code>v-model</code>，但实际更新时是直接改了对象的属性，跳过了通知 <code>App.vue</code> 更新数据的步骤，在 <code>MyForm.vue</code> 中偷偷改了数据，违背了设计原则。</p>
<h2 data-id="heading-4">修复方案</h2>
<p>既然直接绑定属性会导致“暗箱操作”，那我们就改成显式的方式——**每次字段更新都通过一个 <code>update</code> 函数，生成一个新对象来赋值。</p>
<div class="code-block-extension-header">
<div class="code-block-extension-headerLeft">
<div class="code-block-extension-foldBtn">
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><!-- MyForm.vue -->
<script setup>
import MyInput from './MyInput.vue'
import { computed } from 'vue'
const props = defineProps({
modelValue: Object
});
const emit = defineEmits(['update:modelValue']);
const model = computed({
get: () => props.modelValue,
set: (v) => {
console.log('MyForm.vue update:modelValue', v)
emit('update:modelValue', v)
}
})
function update(k, v) {
model.value = {
...model.value,
: v
}
}
</script>
<template>
<div>开始：<MyInput
:model-value="model.start"
@update:model-value="v => update('start', v)"
/></div>
<div>结束：<MyInput
:model-value="model.end"
@update:model-value="v => update('end', v)"
/></div>
</template></pre>
</div>
<div>
<div>
<p>此时，<code>console.log('MyForm.vue update:modelValue', v)</code> 代码正常执行。</p>
<p><code>App.vue</code> 中 <code><MyForm :model-value="data" /></code> 时，内层无法更新外层数据。</p>
<h2 data-id="heading-5">小结</h2>
<p><strong>在组件化设计中，数据的“所有权”必须与“修改权”严格对应。</strong> <code>App.vue</code> 作为数据的拥有者，应该掌握唯一的修改权限；<code>MyForm.vue</code>只能通过“申请-批准”的机制（即 <code>emit</code> 事件）来请求变更。这是保证状态可预测、可调试的基石。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19682693
頁:
[1]