Vue.js 的 v-model 指令方便了组件间的双向数据绑定。然而，在自定义组件中处理对象类型的 v-model 时，需要注意避免直接修改父组件数据的问题。子组件不应该直接改变父组件的 props，这会让数据流变得复杂，增加调试难度。
JavaScript 中的对象和数组是通过引用传递的，这意味着子组件可以直接修改对象 props 的嵌套属性。虽然 Vue.js 不会对嵌套属性的修改发出警告（为了性能考虑），但这可能导致难以察觉的 bug。
本文探讨了在 Vue 中安全使用 v-model 与对象的方法，并对比了不同方案的优劣。
问题：使用计算属性或 defineModel 的缺陷
立即学习“前端免费学习笔记（深入）”；
直接使用计算属性或 defineModel 来实现 v-model，虽然看似简单，但它们会直接修改原始对象，违反了单向数据流的原则，容易造成难以调试的错误。以下示例展示了使用计算属性时的问题：即使在 set 方法中使用了 clonedeep，getter 返回的对象仍然是可变的，导致原始对象被意外修改。
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));
},
});
defineModel 也存在类似问题。
网奇Eshop是一个带有国际化语言支持的系统，可以同时在一个页面上显示全球任何一种语言而没有任何障碍、任何乱码。在本系统中您可以发现，后台可以用任意一种语言对前台进行管理、录入而没有阻碍。而任何一个国家的浏览者也可以用他们的本国语言在你的网站上下订单、留言。用户可以通过后台随意设定软件语言，也就是说你可以用本软件开设简体中文、繁体中文与英文或者其他语言的网上商店。网奇Eshop系统全部版本都使用模
解决方案：使用 watch 和 ref 实现安全的双向绑定
正确的做法是使用 ref 和 watch 来监控数据变化，并通过克隆对象来更新父组件数据。我们需要两个 watch 函数：
- 监控
props.modelvalue的变化，更新内部ref对象。 - 监控内部
ref对象的变化，向父组件发出更新，同时使用isupdating变量防止无限循环。
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 }
);
更简洁的方案：使用 VueUse 的 useVModel
为了简化代码，我们可以使用 VueUse 库中的 useVModel 可组合函数。它已经内置了处理对象克隆和防止无限循环的逻辑。
import { useVModel } from '@vueuse/core';
import { cloneDeep } from 'lodash-es';
// ... (props, emit 定义) ...
const form = useVModel(props, 'modelValue', emit, { clone: cloneDeep, passive: true, deep: true });
通过以上方法，我们可以安全地使用 v-model 与对象，避免直接修改父组件数据，保持代码简洁和数据流清晰。 一个包含所有示例代码的 StackBlitz 链接可以帮助您更好地理解和实践这些方法。
