Vue3中 watch 和 watchEffect 的区别

袋鱼不重2025-04-26 10:32

在 Vue3 中，watch 和 watchEffect 是用来监视响应式数据变化并执行相应操作的两种不同方式。

watch：

watch 是一个函数，它接受两个参数：要监视的数据或计算属性，以及一个回调函数。
watch 是声明式的，需要明确指定要监视的数据或计算属性，以及在数据变化时要执行的回调函数。
可以访问先前值和当前值，以便在回调函数中执行更复杂的逻辑。
watch 的回调函数默认情况下不在初始渲染时执行，只有设置了 immediate 为 true 时才会执行，然后在监视的数据发生变化时再次执行。

js 复制代码

<template>
  <div>
    <input v-model="demoValue" />
  </div>
</template>

<script setup>
const demoValue = ref("Hi!");

// 有明确的监听数据源 message
  watch(demoValue, (newVal, oldVal)=>{
    console.log(`demoValue changed from ${oldVal} to ${newVal}`)
  })
</script>

watchEffect：

watchEffect 是一个函数，它接受一个包含响应式数据访问的函数作为参数。
watchEffect 是更像是一个函数式的副作用，它会自动追踪在函数中访问的响应式数据，并在其中任何数据变化时自动触发回调。
它不提供先前值的参数，所以无法访问先前值。
watchEffect 的回调函数会在组件渲染后立即执行一次，然后在其中访问的数据发生变化时再次执行。

js 复制代码

<template>
  <div>
    <input v-model="message" />
  </div>
</template>

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

const message = ref("Hi!");
// 无明确的数据监听源
watchEffect(()=>{
  console.log(`demoValue changed to ${demoValue.value}`);
})
</script>

总结：watch 适用于需要访问先前值或执行更复杂逻辑的情况，watchEffect 则更适用于简单的响应式数据副作用。需根据具体需求选择使用哪种方式。