Vue3 watch 监听对象数组中对象的特定属性

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 函数或对象的索引可以很方便地监听对象数组中对象的特定属性，并在变化发生时执行相应的操作。