Vue3中如何使用composition API的watch进行深度监听（deep）

提问者：Terry2025.04.18浏览：1098

vue3 问答

在Vue3的Composition API中，`watch`函数提供了强大的响应式数据监听能力，深度监听（`deep`）是一个非常实用的功能，它允许我们对对象或数组的内部变化进行监听，下面将详细介绍如何使用`watch`进行深度监听。

基本的watch使用

在Vue3的Composition API中，watch函数可以用来监听响应式数据的变化，监听一个简单的响应式变量：

import { ref, watch } from 'vue';
export default {
  setup() {
    const count = ref(0);
    watch(count, (newValue, oldValue) => {
      console.log(`count 变化了，新值: ${newValue}，旧值: ${oldValue}`);
    });
    return {
      count
    };
  }
};

在上述代码中,我们通过watch监听了count这个ref类型的响应式数据，每当count的值发生变化时，回调函数就会被触发。

监听对象属性变化（默认浅监听）

当我们尝试监听一个对象时,默认情况下watch是浅监听的。

import { ref, watch } from 'vue';
export default {
  setup() {
    const user = ref({
      name: '张三',
      age: 20
    });
    watch(user, (newValue, oldValue) => {
      console.log('user 对象变化了');
    });
    // 下面这行代码不会触发watch回调
    user.value.age = 21;
    return {
      user
    };
  }
};

在上述代码中,直接修改user.value.age并不会触发watch的回调函数，因为默认是浅监听，它只检测user引用的变化，而不是对象内部属性的变化。

使用deep进行深度监听对象

为了监听对象内部属性的变化,我们需要使用deep选项，修改上面的代码如下：

import { ref, watch } from 'vue';
export default {
  setup() {
    const user = ref({
      name: '张三',
      age: 20
    });
    watch(user, (newValue, oldValue) => {
      console.log('user 对象变化了');
    }, { deep: true });
    user.value.age = 21;
    // 此时会触发watch回调
    return {
      user
    };
  }
};

通过设置{ deep: true }，watch会对user对象进行深度监听，即使是对象内部属性的变化也能被监听到。

深度监听数组变化

watch同样可以深度监听数组的变化。

import { ref, watch } from 'vue';
export default {
  setup() {
    const list = ref([1, 2, 3]);
    watch(list, (newValue, oldValue) => {
      console.log('list 数组变化了');
    }, { deep: true });
    list.value.push(4);
    // 会触发watch回调
    return {
      list
    };
  }
};

当我们通过push方法修改数组时，由于设置了deep: true，watch的回调函数会被触发。

监听对象特定属性的深度变化

有时候我们可能只想监听对象中某个特定属性的深度变化,只想监听user对象中address属性的变化：

import { ref, watch } from 'vue';
export default {
  setup() {
    const user = ref({
      name: '张三',
      address: {
        city: '北京',
        street: '长安街'
      }
    });
    watch(() => user.value.address, (newValue, oldValue) => {
      console.log('user.address 变化了');
    }, { deep: true });
    user.value.address.city = '上海';
    // 会触发watch回调
    return {
      user
    };
  }
};

在上述代码中,我们通过传入一个返回特定属性的函数作为第一个参数，并且设置deep: true，实现了对user.address的深度监听。

注意事项

性能问题：深度监听会递归遍历对象或数组的所有属性，这在数据量较大时可能会对性能产生一定影响，所以在使用时要谨慎，确保确实有必要进行深度监听。
新旧值比较：在深度监听时，由于对象或数组的变化可能是内部的，所以oldValue和newValue可能看起来是相同的引用，在修改user.value.age时，oldValue和newValue的user引用并没有改变，只是内部属性变化了，如果需要精确比较新旧值的差异，可能需要更复杂的逻辑，比如使用lodash的isEqual方法。