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

Vue3 学习笔记（十二）侦听器详解

news 2024/10/30 15:29:37

在 Vue 3 中，侦听器是一种响应式特性，允许你观察和响应 Vue 实例上的数据变动。Vue 提供了 watch 和 watchEffect 两个函数来创建侦听器。

1、`watch` 侦听器

watch 是一个用于侦听特定数据源变化的函数。它允许你指定一个或多个数据源，并在这些数据源变化时执行回调函数。watch 通常用于侦听响应式状态的变化，并在变化发生时执行副作用。

特点：

懒执行：watch 只有在被侦听的响应式数据变化时才会执行回调函数。
精确侦听：你可以精确指定要侦听的数据源，watch 会确保只有在这些数据源变化时才触发回调。
可停止：watch 返回一个停止侦听的函数，你可以在需要时停止侦听。

（1）、基本用法

<script setup>
import { ref, watch } from 'vue';const state = ref(0);
const newstate = ref(0);
const oldtate = ref(0);// 创建侦听器
watch(() => state.value, (newValue, oldValue) => {newstate.value =  newValue;oldtate.value =  oldValue;
});// 定义事件处理函数function handleClick() {state.value = 10}</script><template><span> Selected: {{ newstate + "/"  + oldtate}}</span><button @click="handleClick">Click me</button></template>

这段代码演示了如何在 Vue 3 中使用 <script setup> 语法来创建响应式状态和侦听器。当状态 state 发生变化时，侦听器会更新 newstate 和 oldtate 的值，并且在模板中显示这些变化。点击按钮会触发 handleClick 函数，该函数更新 state 的值，从而触发侦听器的回调函数。

（2）、侦听多个源

<script setup>
import { ref, watch } from 'vue';const firstName = ref('John');
const lastName = ref('Doe');const firstNewName = ref('John');
const lastnewName = ref('Doe');watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {console.log(`Name changed from ${oldFirstName} ${oldLastName} to ${newFirstName} ${newLastName}`);firstNewName.value =  newFirstName;lastnewName.value =  newLastName;
});// 定义事件处理函数function handleClick() {firstName.value ='111111'lastName.value ='222222'}</script><template><span> Selected: {{ firstNewName  + "/"  + lastnewName}}</span><p> </p><button @click="handleClick">Click me</button></template>

点击按钮前：

在这里插入图片描述

点击按钮后：

在这里插入图片描述

（3）、侦听数据源类型

watch 的第一个参数可以是不同形式的“数据源”：

它可以是一个 ref (包括计算属性)、一个响应式对象、一个getter 函数、或多个数据源组成的数组：

const x = ref(0)
const y = ref(0)// 单个 ref
watch(x, (newX) => {console.log(`x is ${newX}`)
})// getter 函数
watch(() => x.value + y.value,(sum) => {console.log(`sum of x + y is: ${sum}`)}
)// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)
})

(4) 、一次性侦听器

仅支持 3.4 及以上版本

每当被侦听源发生变化时，侦听器的回调就会执行。

如果希望回调只在源变化时触发一次，请使用 once: true 选项。

watch(source,(newValue, oldValue) => {// 当 `source` 变化时，仅触发一次},{ once: true }
)

2、`watchEffect` 侦听器

watchEffect 是一个用于侦听多个响应式数据源变化的函数。它立即执行回调函数，并在其依赖的响应式数据变化时重新执行。

特点：

即时执行：watchEffect 在创建时立即执行回调函数，而不仅仅是在依赖的数据变化时。
依赖跟踪：watchEffect 会自动追踪其回调函数中使用的所有响应式数据。
自动清理：watchEffect 在组件卸载时自动停止侦听，无需手动停止。

<script setup>
import { ref, watchEffect } from 'vue';const x = ref(0);
const y = ref(0);const xNewsum = ref(0);// 创建侦听器
watchEffect(() => {xNewsum.value = x.value +  y.value ;
});// 定义事件处理函数function handleClick() {x.value =134y.value =134}</script><template><span> xNewsum: {{ xNewsum}}</span><p> </p><button @click="handleClick">Click me</button></template>

启动时，立即执行：

在这里插入图片描述

当点击按钮后，更新数据：

在这里插入图片描述

3 、选择 `watch` 还是 `watchEffect`

如果你需要在数据变化时执行副作用，并且希望副作用只在数据变化时触发，使用 watch。
如果你需要立即执行副作用，并且副作用依赖于多个响应式数据源，使用 watchEffect。
如果你的副作用逻辑较为简单，或者你希望副作用能够立即执行，watchEffect 可能是更好的选择。
如果你需要更精细的控制副作用的执行时机，或者你需要在副作用执行前后进行额外的操作，watch 可能更适合你的需求。

（1）、`watch` 的应用场景

侦听特定数据源的变化：

当你需要在特定的响应式数据变化时执行操作，比如表单验证、数据转换或者条件渲染。

import { ref, watch } from 'vue';const username = ref('');watch(username, (newValue, oldValue) => {if (newValue !== oldValue) {console.log(`Username changed from ${oldValue} to ${newValue}`);}
});

条件渲染：

当你需要根据数据的变化来决定是否执行某些操作，例如，只有在某个条件满足时才执行副作用。

import { ref, watch } from 'vue';const isPremiumUser = ref(false);watch(isPremiumUser, (newStatus) => {if (newStatus) {console.log('User is now a premium user');}
});

依赖多个数据源：

当你需要侦听多个数据源，并在任何一个数据源变化时执行操作。

import { ref, watch } from 'vue';const firstName = ref('');
const lastName = ref('');watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {console.log(`Name changed from ${oldFirstName} ${oldLastName} to ${newFirstName} ${newLastName}`);
});

（2）、`watchEffect` 的应用场景

立即执行副作用：

当你需要在组件初始化时立即执行副作用，并且副作用依赖于多个响应式数据源。

import { ref, watchEffect } from 'vue';const count = ref(0);watchEffect(() => {console.log(`Count is now ${count.value}`);
});

复杂的依赖跟踪：

当你的副作用依赖于多个响应式数据源，并且这些依赖关系在副作用函数中不明显时。

import { ref, computed, watchEffect } from 'vue';const firstName = ref('');
const lastName = ref('');const fullName = computed(() => `${firstName.value} ${lastName.value}`);watchEffect(() => {console.log(`Full name is now ${fullName.value}`);
});

自动清理副作用：

当你需要在副作用中设置事件监听器或其他需要清理的资源，并且希望这些资源在组件卸载时自动清理。

import { onMounted, onUnmounted, watchEffect } from 'vue';watchEffect(() => {const handleResize = () => {console.log('Window resized');};window.addEventListener('resize', handleResize);onUnmounted(() => {window.removeEventListener('resize', handleResize);});
});```<br/>