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

Vue.js中的v-model指令大家都非常熟悉，它实现了组件间的双向数据绑定。但当为自定义组件手动实现v-model时，通常会遇到一些问题。

通常的做法如下：

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template>

请注意，我们不会在组件内部修改modelValue prop的值。相反，我们将更新后的值通过emit方法传递回父组件，由父组件进行实际的修改。这是因为：子组件不应该影响父组件的状态，这会使数据流复杂化，并增加调试难度。

正如Vue文档中所述，不应在子组件内部修改prop。如果这样做，Vue会在控制台中发出警告。

对象的情况如何？

JavaScript中的对象和数组是一种特殊情况，因为它们是按引用传递的。这意味着组件可以直接修改对象prop的嵌套属性。但是，Vue不会对嵌套对象属性中的修改发出警告（跟踪这些修改会带来性能损失）。因此，这种意外的更改可能会导致应用程序中出现难以察觉和难以调试的问题。

大多数情况下，我们使用基本值作为v-model。但是，在某些情况下，例如构建表单组件时，我们可能需要一个可以处理对象的自定义v-model。这就引出一个重要的问题：

如何实现一个自定义的v-model来处理对象，同时避免上述陷阱？

探讨问题

一种方法是使用可写的计算属性或defineModel辅助函数。但是，这两种解决方案都有一个显著的缺点：它们直接修改了原始对象，这违背了保持清晰数据流的目的。

为了说明这个问题，让我们来看一个“表单”组件的例子。这个组件旨在在表单中的值发生更改时，将对象的更新副本发射回父组件。我们将尝试使用可写的计算属性来实现这一点。

在这个例子中，可写的计算属性仍然会修改原始对象。

import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';

type Props = {
  modelValue: { name: string; email: string; };
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({ name: '', email: '' }),
});

const emit = defineEmits<{
  'update:modelValue': [value: Props['modelValue']];
}>();


const formData = computed({
  // 返回的getter对象仍然是可变的
  get() {
    return props.modelValue;
  },
  // 注释掉setter仍然会修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});

这不起作用，因为从getter返回的对象仍然是可变的，导致原始对象被意外修改。

defineModel也是一样。由于update:modelValue没有从组件中发出，并且对象属性在没有任何警告的情况下被修改。

解决方案

处理这种情况的“Vue方式”是使用内部响应式值来表示对象，并实现两个观察者：

1. 一个观察者监控modelValue prop的更改，并更新内部值。这确保了内部状态反映了父组件传递的最新prop值。
2. 一个观察者观察内部值的更改。当内部值更新时，它将向父组件发出对象的全新克隆版本，以避免直接修改原始对象。

为了防止这两个观察者之间发生无休止的反馈循环，我们需要确保对modelValue prop的更新不会意外地重新触发内部值的观察者。

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template>

我知道你在想什么：“这太多了！”让我们看看如何进一步简化它。

使用VueUse简化解决方案

将此逻辑提取到可重用的组合式函数中是简化流程的好方法。但好消息是：我们甚至不需要这样做！VueUse中的useVModel组合式函数可以帮我们处理这个问题！

VueUse是一个功能强大的Vue实用程序库，通常被称为组合式实用程序的“瑞士军刀”。它是完全可树状摇动的，因此我们可以只使用所需的部分，而无需担心会增加包的大小。

以下是使用useVModel重构之前的示例：

import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';

type Props = {
  modelValue: { name: string; email: string; };
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({ name: '', email: '' }),
});

const emit = defineEmits<{
  'update:modelValue': [value: Props['modelValue']];
}>();


const formData = computed({
  // 返回的getter对象仍然是可变的
  get() {
    return props.modelValue;
  },
  // 注释掉setter仍然会修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});

简洁得多！

就是这样！我们已经探讨了如何在Vue中正确使用带有v-model的对象，而不会直接从子组件中修改它。通过使用观察者或利用VueUse的useVModel等组合式函数，我们可以在应用程序中保持清晰和可预测的状态管理。

这里有一个包含本文所有示例的Stackblitz链接。随意探索和实验。

感谢您的阅读，祝您编码愉快！

以上是如何在 Vue 中使用带有 v-model 的对象的详细内容。更多信息请关注PHP中文网其他相关文章！