vue中 watch 和 watchEffect 的区别-IT面试星球

• watch 和 watchEffect 的区别

• watch
• watchEffect
• 使用举例
• 总结

• 源码查看

• ReactiveEffect
• watchEffect 源码
• watch 源码
• dowatch

概述

watch需要手动指定监听的数据，仅在数据变化时触发；watchEffect自动监听无需指定，初始化时默认执行一次绑定函数。

如何使用？

如果需要对响应式数据进行细粒度的控制，例如只监听特定的属性、需要手动停止监听等，那么使用watch会更加合适。

如果只是需要自动追踪响应式数据并触发副作用，例如执行异步操作或者更新UI，那么使用watchEffect会更加方便。

watch 和 watchEffect 的区别

在Vue 3中，watch 和 watchEffect 都是用于监视响应式状态的功能。

watch需要手动指定监听的数据，仅在数据变化时触发；watchEffect自动监听无需指定，初始化时默认执行一次绑定函数。

它们之间的主要区别在于触发时机和使用方式。

`watch`

watch 是一个选项API，在组件的选项中使用，可监听指定的数据变化，并执行回调函数。

• watch 是一个侦听器函数，可以监视特定的数据变化，并在数据变化时执行回调函数。
• 你可以通过传入要监视的数据以及回调函数来创建一个 watch。
• 你可以选择性地传入选项对象来定制 watch 的行为，比如设置监听深度、立即执行等。
• 适合处理需要根据新值和旧值执行不同逻辑的情况，比如计算属性或者复杂的数据侦听。

`watchEffect`

watchEffect是一个函数API，在组件的setup函数或生命周期函数中使用。它会自动追踪依赖的响应式数据，并在数据变化时执行回调函数。

• watchEffect 是一个立即执行的侦听器函数，会自动追踪其内部所使用的响应式数据，并在这些数据变化时重新运行。
• 不需要显式地传入要监视的数据，watchEffect 会自动捕获其内部使用的响应式数据，并在这些数据变化时触发重新运行。
• 适合处理那些不需要关心具体数据变化情况，而只需在数据变化时执行某些逻辑的情况。

watch 更适合处理需要对数据变化做精细控制的情况，而 watchEffect 则更适合处理简单的数据变化触发逻辑。

更多详细内容，请微信搜索“前端爱好者“， 戳我查看 。

使用举例

当使用Vue 3中的watch和watchEffect时，它们之间的区别可以通过具体的示例来说明。

示例1：使用watch监视特定数据的变化

import { watch, reactive } from 'vue';

const state = reactive({
  count: 0,
  doubleCount: 0
});

watch(() => state.count, (newCount, oldCount) => {
  state.doubleCount = newCount * 2;
});

// 现在，每当state.count发生变化时，回调函数会被执行，更新state.doubleCount的值

在这个例子中，我们使用watch来监视state.count的变化。当state.count发生变化时，回调函数会被触发，然后更新state.doubleCount的值。

示例2：使用watchEffect自动追踪内部依赖

import { watchEffect, reactive } from 'vue';

const state = reactive({
  count: 0
});

watchEffect(() => {
  console.log(`Count的值为: ${state.count}`);
});

// 现在，每当state.count发生变化时，watchEffect会自动重新运行，输出最新的count值

在这个例子中，我们使用watchEffect来自动追踪console.log语句内部所使用的响应式数据state.count，当state.count发生变化时，watchEffect会自动重新运行console.log语句，输出最新的count值。

• watch更适合处理需要对数据变化做精细控制的情况，
• watchEffect则更适合处理简单的数据变化触发逻辑，因为它会自动追踪内部依赖并触发相应的副作用。

总结

• watchEffect 可以放一个立即运行一个函数，然后被动地追踪它的依赖，当这些依赖改变时重新执行该函数
• watch 侦测一个或多个响应式数据源并在数据源变化时调用一个回调函数。

要选择使用watch还是watchEffect，取决于具体的场景和需求。

如果需要对响应式数据进行细粒度的控制，例如只监听特定的属性、需要手动停止监听等，那么使用watch会更加合适。

如果只是需要自动追踪响应式数据并触发副作用，例如执行异步操作或者更新UI，那么使用watchEffect会更加方便。

总之，watch和watchEffect都是非常有用的响应式API，开发者可以根据具体的需求选择使用哪一个。另外，在使用watch和watchEffect时，需要注意避免多余的计算和渲染，以提高应用的性能和响应速度。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
  </div>
</template>
 
<script>
import { reactive, watch, watchEffect } from 'vue';
 
export default {
  setup() {
    const state = reactive({
      count: 0,
    });
 
    // 使用 watch 监听 count 的变化
    watch(
      () => state.count,
      (newVal, oldVal) => {
        console.log(`count 变化，新值为 ${newVal}，旧值为 ${oldVal}`);
      }
    );
 
    // 使用 watchEffect 响应式地追踪 count
    watchEffect(() => {
      state.double = state.count * 2;
    });
 
    return {
      count: state.count,
      double: state.double,
    };
  },
};
</script>