Vue3學院watch

Vue 3 中watch物件陣列(array of objects)變化的三種方法

by admin
watch array of objects

在 Vue 3 中，我們經常需要監視陣列中物件的變化。

然而，由於 Vue 的響應式系統的特性，直接使用 watch 可能無法正確檢測到這些變化。

本文將介紹三種常用的解決方案，並比較它們的優缺點。

問題描述

首先，讓我們看看為什麼直接使用 watch 可能會遇到問題：

const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
]);

watch(items, (newItems, oldItems) => {
  // newItems 和 oldItems 指向同一個物件
  // 無法正確檢測變化
});

在這個例子中，newItems 和 oldItems 實際上指向同一個物件，因此我們無法比較它們的差異。

解決方案

1. 使用 Lodash 的 cloneDeep 方法

Lodash 的 cloneDeep 方法可以創建deep copy，包括處理循環引用。