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

一. watch

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

用法1:

javascript 复制代码
<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(推荐使用):

javascript 复制代码
watch(()=>person.value.name,(newValue)=>{
 	console.log("newValue:"+newValue)
})

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

javascript 复制代码
watch(person,(newValue)=>{
	console.log(newValue)
},{deep:true,immediate:true})

完整代码:

html 复制代码
<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>

需要侦听多个,推荐分开侦听:

javascript 复制代码
//nv new value的缩写 新值  ov老值
watch(firstName,(nv,ov)=>{
 
}

watch(lastName,(nv,ov)=>{
 
})

二.watchEffect

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

javascript 复制代码
watchEffect(()=>{
		console.log(firstName.value,lastName.value)
	})

三.watch vs. watchEffect

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

  • watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外,仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖,因此,我们能更加精确地控制回调函数的触发时机。

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

相关推荐
熊猫钓鱼>_>9 分钟前
深度解析学习率:梯度下降中的“速度与激情“
学习
charlie11451419136 分钟前
精读 C++20 设计模式:行为型设计模式 — 备忘录模式
c++·学习·设计模式·c++20·备忘录模式
我的xiaodoujiao44 分钟前
Web UI自动化测试学习系列5--基础知识1--常用元素定位1
windows·python·学习·测试工具
张永清-老清1 小时前
每周读书与学习->初识JMeter 元件(三)
学习·测试工具·性能调优·jmeter性能测试·每周读书与学习
青衫旧故1 小时前
Uniapp Vue2 Vue3常量保存及调用
前端·javascript·vue.js·uni-app
charlie1145141911 小时前
精读C++20设计模式——行为型设计模式:策略模式
c++·学习·设计模式·策略模式·c++20
Brookty2 小时前
【Java学习】定时器Timer(源码详解)
java·开发语言·学习·多线程·javaee
abcooxj2 小时前
同步与互斥
学习
许泽宇的技术分享3 小时前
AudioNotes:当FunASR遇见Qwen2,音视频转笔记的技术革命
笔记·音视频
蒙奇D索大3 小时前
【数据结构】图论核心应用:关键路径算法详解——从AOE网到项目管理实战
数据结构·笔记·学习·考研·算法·图论·改行学it