Vue.js中的v-model指令大家都非常熟悉，它實(shí)作了元件間的雙向資料綁定。但當(dāng)為自訂元件手動(dòng)實(shí)作v-model時(shí)，通常會(huì)遇到一些問題。

通常的做法如下：

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

請(qǐng)注意，我們不會(huì)在元件內(nèi)部修改modelValue prop的值。相反，我們將更新後的值透過emit方法傳遞回父元件，由父元件進(jìn)行實(shí)際的修改。這是因?yàn)椋?strong>子元件不應(yīng)該影響父元件的狀態(tài)，這會(huì)使資料流複雜化，並增加除錯(cuò)難度。

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

物件的情況如何？

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

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

如何實(shí)作一個(gè)自訂的v-model來處理對(duì)象，同時(shí)避免上述陷阱？

探討問題

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

為了說明這個(gè)問題，讓我們來看一個(gè)「表單」元件的範(fàn)例。這個(gè)元件旨在在表單中的值發(fā)生變更時(shí)，將物件的更新副本發(fā)射回父元件。我們將嘗試使用可寫的計(jì)算屬性來實(shí)現(xiàn)這一點(diǎn)。

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

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回傳的物件仍然是可變的，導(dǎo)致原始物件被意外修改。

defineModel也是一樣。由於update:modelValue沒有從組件中發(fā)出，並且物件屬性在沒有任何警告的情況下被修改。

解決方案

處理這種情況的「Vue方式」是使用內(nèi)部響應(yīng)式值來表示對(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ā)出物件的全新克隆版本，以避免直接修改原始物件。

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

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

我知道你在想什麼：「這太多了！」讓我們看看如何進(jìn)一步簡化它。

使用VueUse簡化解

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

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

以下是使用useVModel重構(gòu)之前的範(fà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對(duì)象仍然是可變的
  get() {
    return props.modelValue;
  },
  // 注釋掉setter仍然會(huì)修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});

簡潔許多！

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

這裡有一個(gè)包含本文所有範(fàn)例的Stackblitz連結(jié)。隨意探索和實(shí)驗(yàn)。

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

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