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

uni-app学习笔记十一--vu3 watch和watchEffect侦听

news 来源：原创 2025/5/26 7:54:53

一. watch

在有些情况下，我们需要在状态变化时执行一些操作，此时可以使用watch来实现这种效果，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数。watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组，但是注意：watch 直接侦听响应式对象的属性值。下面我们来看下它的用法

用法1：

<script setup>import {ref, watch} from "vue"const person = ref({name:"Jim",age:21})watch(person,(oldValue,newValue)=>{console.log("oldValue:"+oldValue)console.log("newValue:"+newValue)})
</script>

用法2(推荐使用)：

watch(()=>person.value.name,(newValue)=>{console.log("newValue:"+newValue)
})

用法3(比较耗性能，必要时才使用)：开启尝试侦听，立即侦听

watch(person,(newValue)=>{console.log(newValue)
},{deep:true,immediate:true})

完整代码：

<template><view><input type="text" v-model="person.name" /></view>{{person}}
</template><script setup>import {ref, watch} from "vue"const person = ref({name:"Jim",age:21})// watch(person,(oldValue,newValue)=>{// 	console.log("oldValue:"+oldValue)// 	console.log("newValue:"+newValue)// })// watch(()=>person.value.name,(newValue)=>{// 	console.log("newValue:"+newValue)// })watch(person,(newValue)=>{console.log(newValue)},{deep:true,immediate:true})
</script><style lang="scss" scoped></style>

需要侦听多个，推荐分开侦听：

//nv new value的缩写 新值  ov老值
watch(firstName,(nv,ov)=>{}watch(lastName,(nv,ov)=>{})

二.watchEffect

watchEffect() 允许我们自动跟踪回调的响应式依赖,性能消耗较大，一般很少使用。

watchEffect(()=>{console.log(firstName.value,lastName.value)})

`三.watch` vs. `watchEffect`

watch 和 watchEffect 都能响应式地执行侦听。它们之间的主要区别是追踪响应式依赖的方式：

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。