当前位置：首页 > news >正文

vue watch 和 watchEffect的区别和用法

news 来源：原创 2025/6/27 13:53:57

在 Vue.js 里，watch 和 watchEffect 都用于响应式地追踪数据变化并执行相应操作，不过它们在使用方式、应用场景等方面存在差异。

1. `watch`

watch 是 Vue 提供的一个选项，用于监听特定数据的变化。当监听的数据发生变化时，会触发相应的回调函数。

基本用法

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
    }
  }
};
</script>

在上述代码里，watch 选项监听 message 数据的变化。当 message 的值改变时，会触发回调函数，回调函数接收两个参数：newValue（新值）和 oldValue（旧值）。

监听对象属性

若要监听对象的某个属性，可使用字符串路径：

<template>
  <div>
    <input v-model="user.name" placeholder="输入姓名">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: ''
      }
    };
  },
  watch: {
    'user.name'(newValue, oldValue) {
      console.log(`姓名新值: ${newValue}, 姓名旧值: ${oldValue}`);
    }
  }
};
</script>

深度监听

当需要监听对象内部属性的变化时，可使用 deep 选项：

<template>
  <div>
    <input v-model="user.name" placeholder="输入姓名">
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: ''
      }
    };
  },
  watch: {
    user: {
      handler(newValue, oldValue) {
        console.log('用户对象发生变化');
      },
      deep: true
    }
  }
};
</script>

2. `watchEffect`

watchEffect 是 Vue 3 引入的一个函数，它会立即执行传入的函数，并响应式地追踪函数内部依赖的所有响应式数据。当这些依赖的数据发生变化时，会重新执行该函数。

基本用法

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const message = ref('');

watchEffect(() => {
  console.log(`当前消息: ${message.value}`);
});
</script>

在上述代码中，watchEffect 传入的函数会马上执行，并且会追踪 message 的变化。当 message 的值改变时，该函数会重新执行。

停止监听

watchEffect 返回一个停止函数，调用该函数可停止监听：

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
    <button @click="stop">停止监听</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const message = ref('');
const stop = watchEffect(() => {
  console.log(`当前消息: ${message.value}`);
});

const stopWatch = () => {
  stop();
};
</script>

3. 区别与使用场景

区别
- 语法形式：watch 是一个选项，通常在组件选项中使用；watchEffect 是一个函数，在 setup 函数中使用。
- 依赖追踪：watch 需要明确指定要监听的数据；watchEffect 会自动追踪函数内部依赖的所有响应式数据。
- 执行时机：watch 只有在监听的数据发生变化时才会执行回调函数；watchEffect 会立即执行传入的函数，并且在依赖数据变化时重新执行。
使用场景
- watch：适用于需要明确知道数据变化前后的值，或者需要监听特定数据的变化。
- watchEffect：适用于不需要明确指定依赖，只要依赖的数据变化就执行相应操作的场景。