#鸿蒙2025年度先锋体验#

字数 936，阅读大约需 5 分钟

在 Vue 3 中，watchEffect 是 Composition API 的一部分。
提供了一个响应式的作用函数，用于自动寻找其引用并在其改变时重新执行。这对于在一些数据变化时需要去自动执行一些操作的情况超级有用。
我们知道，watchEffect和watch都是现阶段Vue的监听器，那么它们都有哪些一样点和不同点呢？

监听器的基本概念

watch和watchEffect都是用于监听数据变化并执行副作用的API，但它们的使用方式和适用场景有所不同。

• watch：需要显式指定监听的数据源，惰性执行（默认数据变化时才执行），可以获取新旧值
• watchEffect：自动收集依赖，立即执行，无法获取旧值

再详细看看两个API使用上的共同点和不同点

watch的使用方法

监听单个ref数据

<template>
  <div>
    <p>计数器: {{ count }}</p>
    <button @click="count++">增加</button>
  </div>
</template>

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

// 创建响应式数据
const count = ref(0)

// 监听count变化
// 第一个参数：要监听的数据源
// 第二个参数：回调函数，接收新值和旧值
watch(count, (newValue, oldValue) => {
  console.log(`count从${oldValue}变为${newValue}`)
})
</script>

监听多个数据,用数组形式传入

const firstName = ref('李')
const lastName = ref('四')

// 监听多个数据，用数组形式传入
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`姓名从${oldFirst}${oldLast}变为${newFirst}${newLast}`)
})

深度监听

当监听是对象或数组的时候，一般情况下watch不会监听内部属性变化，这时候需要使用开启deep: true深度监听：

let goods = ref{{
  price:1.3,
  name:'前端新次元高级前端开发指南'
}}
// 深度监听对象内部变化
watch(
  goods,
  (newVal, oldVal) => { console.log('数组对象内部变化了:', newVal)},
  { deep: true }  // 开启深度监听
)

// 修改深层属性会触发监听
goods.value.price = '99.9'

初次加载立即执行

在官方的默认规则中，watch是具有惰性的，只有数据变化时才执行。但由于某些场景下，我们可以使用immediate: true可以让它在初始化时立即执行：

watch(
  goods,
  (newValue, oldValue) => {
    console.log(`goods变化: ${newValue}`)
  },
  { deep: true,immediate: true }  // 立即执行
)
goods.value.name = '前端新次元高级前端开发指南v1.0.2'

watchEffect的使用方法

先定义一个 watchEffect 函数，并传入一个回调函数。这个函数中包含了一些需要执行的操作，并且是引用已声明的响应的数据：

import { ref, watchEffect } from 'vue';
    const count = ref(0);
 
    watchEffect(() => {
      console.log(`count 的值是: ${count.value}`);
    });
 
    // 你可以在组件的任何地方改变 count 的值
    const increment = ()=> {
      count.value++;
    }
//改变count值，自增加1
increment()

从上面的列子可以看到：

1. watchEffect会自动收集函数内使用的响应式数据作为依赖。
2. 自动追踪所有响应式依赖，每次依赖变更都会执行此函数。

当然，如果你只是想在某段时间内或者某个逻辑之后需要停止监听，Vue3 也提供了停止监听的方法：

import { ref, watchEffect } from 'vue'

const count = ref(0)

// 获取停止函数
const stop = watchEffect(() => {
  console.log(`count: ${count.value}`)
})

// 5秒后停止监听
setTimeout(() => {
  stop()
  console.log('已停止监听')
}, 5000)