Vue.js中的v-model指令大家都非常熟悉，它實(shí)現(xiàn)了組件間的雙向數(shù)據(jù)綁定。但當(dāng)為自定義組件手動(dòng)實(shí)現(xiàn)v-model時(shí)，通常會(huì)遇到一些問(wèn)題。

通常的做法如下：

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

請(qǐng)注意，我們不會(huì)在組件內(nèi)部修改modelValue prop的值。相反，我們將更新后的值通過(guò)emit方法傳遞回父組件，由父組件進(jìn)行實(shí)際的修改。這是因?yàn)椋?strong>子組件不應(yīng)該影響父組件的狀態(tài)，這會(huì)使數(shù)據(jù)流復(fù)雜化，并增加調(diào)試難度。

正如Vue文檔中所述，不應(yīng)在子組件內(nèi)部修改prop。如果這樣做，Vue會(huì)在控制臺(tái)中發(fā)出警告。

對(duì)象的情況如何？

JavaScript中的對(duì)象和數(shù)組是一種特殊情況，因?yàn)樗鼈兪前匆脗鬟f的。這意味著組件可以直接修改對(duì)象prop的嵌套屬性。但是，Vue不會(huì)對(duì)嵌套對(duì)象屬性中的修改發(fā)出警告（跟蹤這些修改會(huì)帶來(lái)性能損失）。因此，這種意外的更改可能會(huì)導(dǎo)致應(yīng)用程序中出現(xiàn)難以察覺和難以調(diào)試的問(wèn)題。

大多數(shù)情況下，我們使用基本值作為v-model。但是，在某些情況下，例如構(gòu)建表單組件時(shí)，我們可能需要一個(gè)可以處理對(duì)象的自定義v-model。這就引出一個(gè)重要的問(wèn)題：

如何實(shí)現(xiàn)一個(gè)自定義的v-model來(lái)處理對(duì)象，同時(shí)避免上述陷阱？

探討問(wèn)題

一種方法是使用可寫的計(jì)算屬性或defineModel輔助函數(shù)。但是，這兩種解決方案都有一個(gè)顯著的缺點(diǎn)：它們直接修改了原始對(duì)象，這違背了保持清晰數(shù)據(jù)流的目的。

為了說(shuō)明這個(gè)問(wèn)題，讓我們來(lái)看一個(gè)“表單”組件的例子。這個(gè)組件旨在在表單中的值發(fā)生更改時(shí)，將對(duì)象的更新副本發(fā)射回父組件。我們將嘗試使用可寫的計(jì)算屬性來(lái)實(shí)現(xiàn)這一點(diǎn)。

在這個(gè)例子中，可寫的計(jì)算屬性仍然會(huì)修改原始對(duì)象。

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對(duì)象仍然是可變的
  get() {
    return props.modelValue;
  },
  // 注釋掉setter仍然會(huì)修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});

這不起作用，因?yàn)閺膅etter返回的對(duì)象仍然是可變的，導(dǎo)致原始對(duì)象被意外修改。

defineModel也是一樣。由于update:modelValue沒(méi)有從組件中發(fā)出，并且對(duì)象屬性在沒(méi)有任何警告的情況下被修改。

解決方案

處理這種情況的“Vue方式”是使用內(nèi)部響應(yīng)式值來(lái)表示對(duì)象，并實(shí)現(xiàn)兩個(gè)觀察者：

1. 一個(gè)觀察者監(jiān)控modelValue prop的更改，并更新內(nèi)部值。這確保了內(nèi)部狀態(tài)反映了父組件傳遞的最新prop值。
2. 一個(gè)觀察者觀察內(nèi)部值的更改。當(dāng)內(nèi)部值更新時(shí)，它將向父組件發(fā)出對(duì)象的全新克隆版本，以避免直接修改原始對(duì)象。

為了防止這兩個(gè)觀察者之間發(fā)生無(wú)休止的反饋循環(huán)，我們需要確保對(duì)modelValue prop的更新不會(huì)意外地重新觸發(fā)內(nèi)部值的觀察者。

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

我知道你在想什么：“這太多了！”讓我們看看如何進(jìn)一步簡(jiǎn)化它。

使用VueUse簡(jiǎn)化解決方案

將此邏輯提取到可重用的組合式函數(shù)中是簡(jiǎn)化流程的好方法。但好消息是：我們甚至不需要這樣做！VueUse中的useVModel組合式函數(shù)可以幫我們處理這個(gè)問(wèn)題！

VueUse是一個(gè)功能強(qiáng)大的Vue實(shí)用程序庫(kù)，通常被稱為組合式實(shí)用程序的“瑞士軍刀”。它是完全可樹狀搖動(dòng)的，因此我們可以只使用所需的部分，而無(wú)需擔(dān)心會(huì)增加包的大小。

以下是使用useVModel重構(gòu)之前的示例：

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對(duì)象仍然是可變的
  get() {
    return props.modelValue;
  },
  // 注釋掉setter仍然會(huì)修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});

簡(jiǎn)潔得多！

就是這樣！我們已經(jīng)探討了如何在Vue中正確使用帶有v-model的對(duì)象，而不會(huì)直接從子組件中修改它。通過(guò)使用觀察者或利用VueUse的useVModel等組合式函數(shù)，我們可以在應(yīng)用程序中保持清晰和可預(yù)測(cè)的狀態(tài)管理。

這里有一個(gè)包含本文所有示例的Stackblitz鏈接。隨意探索和實(shí)驗(yàn)。

感謝您的閱讀，祝您編碼愉快！

以上是如何在 Vue 中使用帶有 v-model 的對(duì)象的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！