Vue.js 的 v-model 指令方便了组件间的双向数据绑定。然而，在自定义组件中处理对象类型的 v-model 时，需要注意避免直接修改父组件数据的问题。子组件不应该直接改变父组件的 props，这会让数据流变得复杂，增加调试难度。
JavaScript 中的对象和数组是通过引用传递的，这意味着子组件可以直接修改对象 props 的嵌套属性。虽然 Vue.js 不会对嵌套属性的修改发出警告（为了性能考虑），但这可能导致难以察觉的 bug。
本文探讨了在 Vue 中安全使用 v-model 与对象的方法，并对比了不同方案的优劣。
问题：使用计算属性或 defineModel 的缺陷
立即学习“前端免费学习笔记（深入）”；
直接使用计算属性或 defineModel 来实现 v-model，虽然看似简单，但它们会直接修改原始对象，违反了单向数据流的原则，容易造成难以调试的错误。以下示例展示了使用计算属性时的问题：即使在 set 方法中使用了 clonedeep，getter 返回的对象仍然是可变的，导致原始对象被意外修改。
<code class="javascript">import { computed } from 'vue';
import { clonedeep } from 'lodash-es';
// ... (props, emit 定义) ...
const formdata = computed({
get() {
return props.modelvalue;
},
set(newvalue) {
emit('update:modelvalue', clonedeep(newvalue));
},
});</code>
defineModel 也存在类似问题。
解决方案：使用 watch 和 ref 实现安全的双向绑定
正确的做法是使用 ref 和 watch 来监控数据变化，并通过克隆对象来更新父组件数据。我们需要两个 watch 函数：
- 监控
props.modelvalue的变化，更新内部ref对象。 - 监控内部
ref对象的变化，向父组件发出更新，同时使用isupdating变量防止无限循环。
<code class="javascript">import { ref, watch, nextTick } from 'vue';
import { clonedeep } from 'lodash-es';
// ... (props, emit 定义) ...
const formdata = ref(defaultformdata);
let isupdating = false;
watch(
() => props.modelvalue,
(nv) => {
if (!isupdating) {
isupdating = true;
formdata.value = clonedeep(nv);
nextTick(() => { isupdating = false; });
}
},
{ deep: true, immediate: true }
);
watch(
formdata,
(nv) => {
if (!isupdating && nv !== props.modelvalue) {
emit('update:modelvalue', clonedeep(nv));
}
},
{ deep: true }
);</code>
更简洁的方案：使用 VueUse 的 useVModel
为了简化代码，我们可以使用 VueUse 库中的 useVModel 可组合函数。它已经内置了处理对象克隆和防止无限循环的逻辑。
<code class="javascript">import { useVModel } from '@vueuse/core';
import { cloneDeep } from 'lodash-es';
// ... (props, emit 定义) ...
const form = useVModel(props, 'modelValue', emit, { clone: cloneDeep, passive: true, deep: true });</code>
通过以上方法，我们可以安全地使用 v-model 与对象，避免直接修改父组件数据，保持代码简洁和数据流清晰。 一个包含所有示例代码的 StackBlitz 链接可以帮助您更好地理解和实践这些方法。
