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

通常的做法如下：

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

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

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

對象的情況如何？

JavaScript中的對象和數(shù)組是一種特殊情況，因為它們是按引用傳遞的。這意味著組件可以直接修改對象prop的嵌套屬性。但是，Vue不會對嵌套對象屬性中的修改發(fā)出警告（跟蹤這些修改會帶來性能損失）。因此，這種意外的更改可能會導致應用程序中出現(xiàn)難以察覺和難以調(diào)試的問題。

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

如何實現(xiàn)一個自定義的v-model來處理對象，同時避免上述陷阱？

探討問題

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

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

在這個例子中，可寫的計算屬性仍然會修改原始對象。

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沒有從組件中發(fā)出，并且對象屬性在沒有任何警告的情況下被修改。

解決方案

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

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

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

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

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

使用VueUse簡化解決方案

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

VueUse是一個功能強大的Vue實用程序庫，通常被稱為組合式實用程序的“瑞士軍刀”。它是完全可樹狀搖動的，因此我們可以只使用所需的部分，而無需擔心會增加包的大小。

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

簡潔得多！

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

這里有一個包含本文所有示例的Stackblitz鏈接。隨意探索和實驗。

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

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