Vue3 watch 監聽對象數組中對象的特定屬性

在 Vue 3 中，可以使用 watch 函數來監聽對象數組中對象的特定屬性。可以通過在回調函數中遍曆數組來檢查對象的特定屬性是否發生變化，併在變化發生時執行相應的操作。

一、監聽對象的特定屬性

例如，假設有一個名為 items 的對象數組，其中每個對象都有一個名為 checked 的布爾屬性和一個名為 name 的字元串屬性，需要監聽 checked 屬性的變化，併在變化發生時執行相應的操作，可以使用以下代碼：

import { ref, watch } from "vue";

export default {
  setup() {
    const items = ref([
      { name: "item1", checked: false },
      { name: "item2", checked: true },
      { name: "item3", checked: false },
    ]);

    watch(
      () => items.value.map((item) => item.checked),
      (newVal, oldVal) => {
        console.log(`checked values changed from ${oldVal} to ${newVal}`);
      }
    );

    return {
      items,
    };
  },
};

在上面的例子中，使用 ref 函數創建一個名為 items 的響應式對象數組，併在其內部嵌套了一個對象，該對象具有兩個屬性 name 和 checked。然後，使用 watch 函數來監聽數組中所有對象的 checked 屬性的變化，併在回調函數中遍曆數組，檢查所有 checked 屬性的值是否發生變化，當發生變化時，列印一條消息到控制台。

二、監聽某個具體對象的特定屬性

如果需要監聽的是某個具體對象的屬性，可以使用對象的索引來訪問該對象的屬性，並使用該屬性作為 watch 函數的第一個參數進行監聽，例如：

import { ref, watch } from "vue";

export default {
  setup() {
    const items = ref([
      { name: "item1", checked: false },
      { name: "item2", checked: true },
      { name: "item3", checked: false },
    ]);

    watch(
      () => items.value[0].checked,
      (newVal, oldVal) => {
        console.log(`item1 checked changed from ${oldVal} to ${newVal}`);
      }
    );

    return {
      items,
    };
  },
};

在上面的例子中，使用 watch 函數來監聽數組中第一個對象的 checked 屬性的變化，併在回調函數中列印一條消息到控制台。

總之，使用 watch 函數和數組的 map 函數或對象的索引可以很方便地監聽對象數組中對象的特定屬性，併在變化發生時執行相應的操作。

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17337389.html

聲明：歡迎任何形式的轉載，但請務必註明出處！！！