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

PHP中文网 • 2025年3月7日 06:46:16 • 编程技术 • 阅读 2

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 函数：

监控 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 链接可以帮助您更好地理解和实践这些方法。

以上就是如何在 Vue 中使用带有 v-model 的对象的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2642345.html