如何在 Vue 中使用带有 v-model 的对象

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 也存在类似问题。

解决方案：使用 watch 和 ref 实现安全的双向绑定

正确的做法是使用 ref 和 watch 来监控数据变化，并通过克隆对象来更新父组件数据。我们需要两个 watch 函数：

1. 监控 props.modelvalue 的变化，更新内部 ref 对象。
2. 监控内部 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 链接可以帮助您更好地理解和实践这些方法。