Vue Composition API：如何捕获响应式数组中具体变更的属性？

你当前的问题是用deep: true监听整个响应式数组时，只能拿到完整数组，没法知道具体是哪个索引的哪个属性变了，而且直接写watch(users.name)会报错——这很正常，因为users是数组，根本没有name这个属性，自然会报错。

下面给你两种可行的解决方法：

方法一：动态为数组元素的属性添加单独监听 #

这种方法可以精准追踪每个元素的属性变化，还能适配数组的动态增减：

import { reactive, watch, watchEffect, onUnmounted } from 'vue';

const users = reactive([
  { name: 'User1', phone: '12345'},
  { name: 'User2', phone: '67890'},
  { name: 'User3', phone: '34567'},
]);

// 存储所有监听的停止函数，方便后续清理
const watchStopFns = [];

// 封装设置监听的函数
const setupUserWatchers = () => {
  // 先停止之前的所有监听，避免重复
  watchStopFns.forEach(fn => fn());
  watchStopFns.length = 0;

  // 遍历数组，为每个用户的属性添加监听
  users.forEach((user, index) => {
    const stop = watch(
      () => ({ ...user }), // 解构创建副本，触发监听
      (newVal, oldVal) => {
        // 找出变化的属性
        const changedProp = Object.keys(newVal).find(key => newVal[key] !== oldVal[key]);
        if (changedProp) {
          console.log(`users[${index}].${changedProp} was changed from ${oldVal[changedProp]} to ${newVal[changedProp]}`);
        }
      },
      { deep: true }
    );
    watchStopFns.push(stop);
  });
};

// 初始化监听
setupUserWatchers();

// 监听数组长度变化，动态更新监听（适配新增/删除元素的情况）
watch(() => users.length, setupUserWatchers);

// 组件卸载时清理所有监听，防止内存泄漏
onUnmounted(() => {
  watchStopFns.forEach(fn => fn());
});

方法二：在深层监听中对比新旧值 #

如果不需要适配数组动态增减，或者可以接受简单的对比逻辑，也可以直接在原有的深层监听里对比新旧数组的元素和属性：

import { reactive, watch } from 'vue';

const users = reactive([
  { name: 'User1', phone: '12345'},
  { name: 'User2', phone: '67890'},
  { name: 'User3', phone: '34567'},
]);

watch(
  users,
  (newUsers, oldUsers) => {
    newUsers.forEach((user, index) => {
      const oldUser = oldUsers[index];
      if (!oldUser) {
        console.log(`users[${index}] was added`);
        return;
      }

      // 遍历属性对比
      Object.keys(user).forEach(key => {
        if (user[key] !== oldUser[key]) {
          console.log(`users[${index}].${key} was changed from ${oldUser[key]} to ${user[key]}`);
        }
      });
    });

    // 处理被删除的元素
    oldUsers.forEach((user, index) => {
      if (!newUsers[index]) {
        console.log(`users[${index}] was removed`);
      }
    });
  },
  { deep: true }
);

注意：这种方法里，如果你的属性是引用类型（比如嵌套对象），简单的!==对比会失效，需要用深对比函数（比如自己实现或者用lodash的isEqual）来判断属性是否变化。

内容的提问来源于stack exchange，提问作者BLVCK MEISTER