什么是Vue侦听器？

Vue侦听器是一种用于监听数据变化并执行相应操作的机制。它允许你在特定数据发生变化时执行一些自定义的逻辑代码。通过侦听器，Vue可以追踪数据的变化，并在变化时触发相应的回调函数。

怎么使用侦听器

watch

在vue中，可以通过watch函数来使用侦听器。下面是一个小例子

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

// 使用 ref 创建响应式数据 
const myData = ref('hello wrold'); 

// 使用 watch 监听 myData 的变化 
watch(myData, (newVal, oldVal) => { 
// 在数据变化时执行改回调函数
    console.log('数据发生变化：', newVal, oldVal); 
}); 
</script> 
<template> 
<!-- 在模板中使用 myData -->
    <div>
        {{ myData }}
    </div> 
</template>

在上面的例子中，定义了一个myData的数据属性，并使用watch添加了一个侦听器。当myData的值发生变化时，侦听器中定义的回调函数将被触发。

watch接受的参数

watch通常接受两个参数，但还提供可选的第三参数

watch(data,callback,Config)

data：这是一个可以是响应式对象、ref、或一个返回响应式对象的函数。当这个数据发生变化时，触发侦听器中的回调函数。
callback：这是一个在观察的数据变化时执行的函数。它接受两个参数：新值（newVal）和旧值（oldVal）。这两个参数分别表示数据变化后的值和变化前的值。
Config:该参数用于配置额外的选项。主要有两个可选的属性，deep: 布尔值，表示是否深度观察对象内部的变化，默认为 false。如果设置为 true，则会递归观察对象内部的属性变化。immediate: 布尔值，表示在初始渲染时是否立即执行回调函数，默认为 false。如果设置为 true，则会在组件初始化时立即执行一次回调函数。

watch可以监听多个数据源

<script setup> 
import { ref, watch } from 'vue'; 
// 使用 ref 创建响应式数据 
const message = ref('初始消息'); 
const userInput = ref(''); 
const counter = ref(0); 

// 使用 watch 监听 userInput 和 counter 的变化 
watch(
    [userInput, counter], 
    ( [newUserInput, newCounter],  [oldUserInput, oldCounter]) => { 
        console.log('数据发生变化：', newUserInput, newCounter, oldUserInput, oldCounter); 
        message.value = `用户输入：${newUserInput}，计数器：${newCounter}`;
    }
</script>

在上面的例子中，我们创建了三个响应式数据：message、userInput 和 counter。然后，使用 watch 监听了 userInput 和 counter 这两个数据的变化。当其中任何一个发生变化时，回调函数将被调用，可以在回调函数中执行相应的逻辑。

watch 与 watchEffect

watch 和 watchEffect 都是响应式地监听数据变化的函数，但它们在使用和行为上有一些区别。

watch 函数用于监听特定数据的变化，并在数据变化时执行回调函数。它提供了更多的灵活性，可以监听多个数据的变化，并且可以配置一些选项。
watchEffect 函数用于创建一个副作用，它会自动追踪其依赖的响应式数据，并在这些数据变化时重新运行副作用。这个函数更加简洁，不需要明确指定要监听的数据，而是根据副作用函数的内容自动追踪依赖。

import { watchEffect } from 'vue';

watchEffect(() => {
  // 副作用函数，会自动追踪依赖
  // 处理数据变化时的逻辑
});

区别：

参数传递:
- watch 的第一个参数是要观察的数据，第二个参数是回调函数，可以接受新值和旧值。
- watchEffect 的参数是一个副作用函数，函数内部直接使用响应式数据，系统会自动追踪依赖。
监听多个数据:
- watch 可以监听多个数据，通过传递一个数组或对象。
- watchEffect 在其副作用函数中使用的响应式数据会自动追踪，无需显式指定。
配置选项:
- watch 可以通过第三个参数传递配置选项，比如 immediate 和 deep。
- watchEffect 不需要配置选项，但如果需要设置配置选项，可以使用 onInvalidate 钩子。
返回值:
- watch 返回一个用于停止侦听的函数。
- watchEffect 不返回任何东西。

使用场景：

使用 watch
当要监听特定数据的变化，或者需要监听多个数据的变化，并且可能需要配置选项。
使用 watchEffect 当要创建一个自动追踪依赖的副作用，比如在一个计算属性中使用响应式数据时。

总体来说，watch 提供了更多的配置选项和精确的控制，而 watchEffect 更加简洁，适用于那些不需要显式指定依赖的情况。

vue：侦听器(watch)