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

一. 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，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。