Vue 3中如何在watchEffect中忽略特定依赖？

要让watchEffect忽略特定依赖的变化，可以用以下两种方法实现：

方法一：使用untracked函数（推荐） #

Vue3提供的untracked函数可以包裹响应式值的访问逻辑，让这部分访问不会被watchEffect纳入依赖追踪范围。只需将不需要追踪的依赖访问放在untracked的回调里即可。

修改后的代码示例：

import { ref, watchEffect, untracked } from 'vue';

const a = ref(1);
const b = ref(2);
const c = ref(3);

watchEffect(() => {
  console.log('a:', a.value);
  console.log('b:', b.value);
  // 用untracked包裹c.value，避免其变化触发effect
  console.log('c:', untracked(() => c.value));
});

// 修改值
a.value = 10; // 正常触发watchEffect
b.value = 20; // 正常触发watchEffect
c.value = 30; // 不会触发watchEffect

方法二：手动控制依赖追踪状态 #

通过pauseTracking暂停依赖追踪，访问不需要追踪的依赖后，再用resumeTracking恢复追踪，这样就能跳过特定依赖的监听。

代码示例：

import { ref, watchEffect, pauseTracking, resumeTracking } from 'vue';

const a = ref(1);
const b = ref(2);
const c = ref(3);

watchEffect(() => {
  console.log('a:', a.value);
  console.log('b:', b.value);
  
  // 暂停追踪
  pauseTracking();
  console.log('c:', c.value);
  // 恢复追踪，确保后续其他依赖正常被监听
  resumeTracking();
});

// 修改值
a.value = 10; // 正常触发watchEffect
b.value = 20; // 正常触发watchEffect
c.value = 30; // 不会触发watchEffect

两种方法对比：

• untracked更适合单个值的忽略场景，代码更简洁直观；
• 手动控制追踪状态适合需要忽略多段代码或多个依赖的场景，灵活性更高。

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