一篇文章深度解析：彻底搞懂Vue 3中watch与watchEffect的核心差异与应用场景

watch基本介绍

watch监听某个属性的变化，一旦发生变化，就会触发对应的回调函数执行，在里面进行一些具体的操作，从而达到事件监听的效果。

watch里面具有三个参数：

第一个参数是：选择要监听的属性。

第二个参数是：设置的回调函数。即监听到变化时应该执行的函数 。

第三个参数是：可以设置deep (深度监听) 其值为true和false。还可以设置immediate (是否以当前值执行回调函数) 其值为true和false。

在 Vue 3 中，watch 函数通常用于 setup 函数内部，接受两个参数：要侦听的数据源和回调函数。数据源可以是响应式引用（ref）、计算属性（computed）或者是一个返回响应式值的函数。

侦听单个数据源

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return { count };
  },
};

侦听多个数据源

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const name = ref('Alice');

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count: ${oldCount} -> ${newCount}, name: ${oldName} -> ${newName}`);
    });

    return { count, name };
  },
};

侦听计算属性

import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubled = computed(() => count.value * 2);

    watch(doubled, (newValue, oldValue) => {
      console.log(`doubled changed from ${oldValue} to ${newValue}`);
    });

    return { count, doubled };
  },
};

侦听reactive定义的一个响应式数据

let rea=reactive({
        name:'我是谁',
        age:21
      })
      //第三种情况 监听reactive定义的属性
       watch(rea,(newValue,oldValue)=>{
        console.log('rea变化了',newValue,oldValue)
      })

侦听 getter 函数

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const name = ref('Alice');

    watch(() => count.value + name.value, (newValue, oldValue) => {
      console.log(`combined value changed from ${oldValue} to ${newValue}`);
    });

    return { count, name };
  },
};

选项参数

除了数据源和回调函数外，watch 还接受一个可选的选项对象，用于配置侦听器的行为。

• deep：是否深度侦听对象内部的变化。默认为 false。
• immediate：是否在侦听器创建时立即执行一次回调函数。默认为 false。
• flush：何时触发回调。可以是 'pre'（在组件更新之前）、'post'（在组件更新之后）或 'sync'（同步触发）。默认为 'post'。
• onTrack 和 onTrigger：用于调试，它们分别会在响应式依赖被追踪和触发时调用。

watch(count, (newValue, oldValue) => {
  // ...
}, {
  deep: true, // 深度侦听
  immediate: true, // 立即执行
  flush: 'pre' // 在组件更新之前触发
});

停止侦听

watch 函数会返回一个停止侦听的函数，你可以调用这个函数来取消对数据源的侦听。这在组件卸载或某些条件下需要停止侦听时非常有用。

const stopWatch = watch(count, (newValue, oldValue) => {
  // ...
});

// 停止侦听
stopWatch();

与 watch 不同，watchEffect 会自动收集其执行函数中的响应式依赖，并在依赖变化时重新运行该函数。它不需要你明确指定要侦听哪些数据，而是自动追踪。这使得 watchEffect 在某些场景下更加简洁和方便。

基本用法

watchEffect 接受一个回调函数作为参数，这个回调函数会在其首次执行时立即运行，并自动收集其内部所依赖的所有响应式数据。当这些依赖的数据发生变化时，watchEffect 会重新运行该回调函数。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log(`count is: ${count.value}`);
    });

    // 每当 count 发生变化时，上面的回调函数都会重新执行

    // 例如，在模板中或 setup 函数的其他地方修改 count
    // count.value++

    return { count };
  },
};

清除副作用

watchEffect 的回调函数可以返回一个清理函数（cleanup function），该函数会在下次重新运行回调之前被调用，用于清除之前的副作用（如事件监听器、计时器等）。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);
    let intervalId;

    watchEffect(() => {
      console.log(`开始监听 count`);

      // 设置一个定时器
      intervalId = setInterval(() => {
        console.log(`count 的当前值是: ${count.value}`);
      }, 1000);

      // 返回一个清理函数
      return () => {
        console.log(`停止监听 count`);
        clearInterval(intervalId);
      };
    });

    // 当 count 发生变化时，会停止之前的定时器并设置新的定时器

    return { count };
  },
};

停止侦听

与 watch 类似，watchEffect 也返回一个停止侦听的函数。但通常，我们不需要显式调用这个停止函数，因为 Vue 会自动管理这些侦听器的生命周期。然而，在某些特殊情况下，你可能需要手动停止侦听。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const stopEffect = watchEffect(() => {
      console.log(`count is: ${count.value}`);
    });

    // 在某个条件下停止侦听
    // if (someCondition) {
    //   stopEffect();
    // }

    return { count };
  },
};

刷新时机

watchEffect 的刷新时机默认为 'post'，即在组件更新后执行。但你也可以通过 flush 选项来更改这个行为。

watchEffect(() => {
  // ...
}, {
  flush: 'pre' // 在组件更新前执行
});