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

vue3 watch监视详解

news 2025/6/17 10:58:15

watch监视

一 ：watch监视{ref}定义的基本类型结构

<template><div class="person"><h1>情况一:watch监视{ref}定义的基本类型结构</h1><h1>当前的和为{{ sum }}</h1><button @click="changeSum">点我sum+1</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'let sum=ref(0)function changeSum(){sum.value +=1;}//监视情况一:watch监视{ref}定义的基本类型结构//当新的值大于等于8的时候停止监视const stopWatch=watch(sum,(newValue,oldValue)=>{console.log('sum变化了一下',newValue,oldValue)if(newValue>=8){stopWatch()}})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在这里插入图片描述
点击按钮之后 价格加一 watch监视sum 在控制台打印了新的值和旧的值

在这里插入图片描述
当新的值大于等于8的时候停止监视

在这里插入图片描述

二 ：watch监视{ref}定义的对象类型结构

  • watch的第一个参数：被监视的数据
  • watch的第二个参数：回调函数
  • watch的第三个参数：监视配置(deep,immediade等等)
<template><div class="person"><h1>情况二:watch监视{ref}定义的【对象类型】结构</h1><h2>汽车名字:{{ car.name }}</h2><h2>汽车价格:{{ car.price }}</h2><button @click="changeName">修改汽车名字</button><button @click="changePrice">修改汽车价格</button><button @click="changeCar">修改汽车</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'let car=ref({name:'兰博基尼',price:1000000})function changeName(){car.value.name+='6'}function changePrice(){car.value.price+=10000}function changeCar(){car.value ={name:"宝马",price:300000}}//监视【ref】定义的【对象类型】数据,监视的是对象的地址值watch(car,(newValue,oldValue)=>{console.log('car改变了',newValue,oldValue)})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在这里插入图片描述
在这里修改汽车名字 和修改汽车价格 控制台都不会打印最新的值和旧的值 是因为监视的是对象的地址值

若想监视对象内部属性的变化的话,需要手动开启深度监视

<template><div class="person"><h1>情况二:watch监视{ref}定义的【对象类型】结构</h1><h2>汽车名字:{{ car.name }}</h2><h2>汽车价格:{{ car.price }}</h2><button @click="changeName">修改汽车名字</button><button @click="changePrice">修改汽车价格</button><button @click="changeCar">修改汽车</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'let car=ref({name:'兰博基尼',price:1000000})function changeName(){car.value.name+='6'}function changePrice(){car.value.price+=10000}function changeCar(){car.value ={name:"宝马",price:300000}}//监视【ref】定义的【对象类型】数据,监视的是对象的地址值watch(car,(newValue,oldValue)=>{console.log('car改变了',newValue,oldValue)},{deep:true})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在这里插入图片描述
这个时候对象内部属性发生改变了 那么他监视也会打印出新的值和旧的值
在这里插入图片描述

三:监视{reactive}定义的【对象类型】结构

监视【reactive】定义的【对象类型】数据,且默认开启深度监视


<template><div class="person"><h1>情况三:监视{reactive}定义的【对象类型】结构</h1><h2>汽车名字:{{ car.name }}</h2><h2>汽车价格:{{ car.price }}</h2><button @click="changeName">修改汽车名字</button><button @click="changePrice">修改汽车价格</button><button @click="changeCar">修改汽车</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'let car=reactive({name:'兰博基尼',price:1000000})function changeName(){car.name+='6'}function changePrice(){car.price+=10000}function changeCar(){Object.assign(car,{name:"宝马",price:300000})}//监视【reactive】定义的【对象类型】数据,且默认开启深度监视watch(car,(newValue,oldValue)=>{console.log('car改变了',newValue,oldValue)   })
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在这里插入图片描述
当点击修改汽车名字 或修改汽车价格 或 修改汽车时 他都监视到了
在这里插入图片描述

情况四:监视{reactive}定义的【对象类型】结构的某一个属性

  1. 若该属性值不是【对象类型】，需要写成函数形式。
<template><div class="person"><h1>情况四:监视{reactive}定义的【对象类型】结构的某一个属性的时候</h1><h2>汽车品牌:{{ car.name }}</h2><h2>汽车价格:{{ car.price }}</h2><h2>汽车样式:{{ car.design.first }} ,{{ car.design.second }}</h2><button @click="changeName">修改汽车品牌</button><button @click="changePrice">修改汽车价格</button><button @click="changeFirst">修改汽车样式一</button><button @click="changeSecond">修改汽车样式二</button><button @click="changeDesign">修改整个汽车样式</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'let car=reactive({name:'奔驰',price:300000,design:{first:'梅赛德斯',second:'E300'}})function changeName(){car.name+='6'}function changePrice(){car.price+=10000}function changeFirst(){car.design.first='奔驰C260l'}function changeSecond(){car.design.second='奔驰A'}function changeDesign(){car.design={first:'奔驰GLS',second:'奔驰EQ'}}//假如我只想监视cat.namewatch(()=>{return car.name},(newValue,oldValue)=>{console.log('car.name改变了',newValue,oldValue)})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在这里插入图片描述
假如我修改汽车价格 修改汽车样式一 修改汽车样式二 修改整个汽车样式 都不会监视 因为我只监视了car.name 只有car.name 发生了改变的时候 控制台才会输出新的值 和旧的值

在这里插入图片描述
2. 若该属性值依然是【对象类型】，可直接编，也可写成函数，不过建议写成函数。

假设我想只监视整个汽车样式修改

<template><div class="person"><h1>情况四:监视{reactive}定义的【对象类型】结构的某一个属性的时候</h1><h2>汽车品牌:{{ car.name }}</h2><h2>汽车价格:{{ car.price }}</h2><h2>汽车样式:{{ car.design.first }} ,{{ car.design.second }}</h2><button @click="changeName">修改汽车品牌</button><button @click="changePrice">修改汽车价格</button><button @click="changeFirst">修改汽车样式一</button><button @click="changeSecond">修改汽车样式二</button><button @click="changeDesign">修改整个汽车样式</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'let car=reactive({name:'奔驰',price:300000,design:{first:'梅赛德斯',second:'E300'}})function changeName(){car.name+='6'}function changePrice(){car.price+=10000}function changeFirst(){car.design.first='奔驰C260l'}function changeSecond(){car.design.second='奔驰A'}function changeDesign(){car.design={first:'奔驰GLS',second:'奔驰EQ'}}// //假如我只想监视cat.name// watch(()=>{return car.name},(newValue,oldValue)=>{//     console.log('car.name改变了',newValue,oldValue)// })//假如我只想监视cat.designwatch(()=>car.design,(newValue,oldValue)=>{console.log('car.name改变了',newValue,oldValue)},{deep:true})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在这里插入图片描述
当我点击修改汽车品牌 或修改汽车价格 他并没有监视 , 因为我只监视修改汽车样式 不论是修改汽车样式一 还是 修改汽车样式二 或者是修改整个汽车样式 他都监视到了
在这里插入图片描述

情况五:监视上述的多个数据

<template><div class="person"><h1>情况五:监视上述的多个数据</h1><h2>汽车品牌:{{ car.name }}</h2><h2>汽车价格:{{ car.price }}</h2><h2>汽车样式:{{ car.design.first }} ,{{ car.design.second }}</h2><button @click="changeName">修改汽车品牌</button><button @click="changePrice">修改汽车价格</button><button @click="changeFirst">修改汽车样式一</button><button @click="changeSecond">修改汽车样式二</button><button @click="changeDesign">修改整个汽车样式</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'let car=reactive({name:'奔驰',price:300000,design:{first:'梅赛德斯',second:'E300'}})function changeName(){car.name+='6'}function changePrice(){car.price+=10000}function changeFirst(){car.design.first='奔驰C260l'}function changeSecond(){car.design.second='奔驰A'}function changeDesign(){car.design={first:'奔驰GLS',second:'奔驰EQ'}}//监视  :情况5：监视上述多个数据watch([()=>car.name,()=>car.design.first],(newValue,oldValue)=>{console.log('car.name改变了',newValue,oldValue)},{deep:true})
</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

在这里插入图片描述
这时候当我修改汽车名字 和汽车第一个样式 他会打印出来新的值和旧的值
在这里插入图片描述

watchEffect监视

<template><div class="person"><h1>需求:若宽度达到20 或者高度达到15时   向服务器发送一个请求</h1><h2>宽度为:{{ width }}</h2><h2>高度为:{{ height }}</h2><button @click="changeWidth">点我宽加一</button><button @click="changeHeigth">点我高加一</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch,watchEffect} from 'vue'let width=ref(15)let height=ref(10)function changeWidth(){width.value +=1}function changeHeigth(){height.value +=1}watchEffect(()=>{if(width.value >=20 || height.value >=15){console.log('向服务器发送请求')}})</script><style>.person{background-color: rebeccapurple;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}
</style>

当我想要在宽度达到20 或者高度达到15时 向服务器发送一个请求 那我就用watchEffect监视
在这里插入图片描述

http://www.lryc.cn/news/571131.html

相关文章：

  • 最简单的远程桌面连接方法是什么？系统自带内外网访问实现
  • 基于Cesium的倾斜切片/模型位置方位调整工具
  • Android多媒体——MediaCodec回调与配置（二十五）
  • Android App启动流程深度解析（一）：从Activity.startActivity开始
  • 常用交易所链接
  • 【PmHub面试篇】PmHub分布式事务Seata保证任务审批状态一致性面试专题解析
  • fd查找文件并拷贝
  • 【启发式算法】RRT算法详细介绍（Python）
  • OSPF 配置全攻略：从基础原理到实战演练
  • python 重要地位
  • UE/Unity/Webgl云渲染推流网址，如何与外部网页嵌套和交互？
  • 答题考试系统小程序ThinkPHP+UniApp
  • NLP学习路线图（五十一）：PyTorch/TensorFlow
  • 用C语言实现面向对象思想编写驱动层--以驱动LED为例
  • R情感分析：解码文本中的情感
  • 《从IaaS到容器化：深度解析云计算三层架构与阿里云ECS+K8s协同实践》
  • Web攻防-XSS跨站文件类型功能逻辑SVGPDFSWFHTMLXMLPMessageLocalStorage
  • Jeston orin nano利用SDK Manager安装ubuntu系统
  • 【Mac 上离线安装 ADB 工具】
  • iOS即时通讯发送图片消息内存暴涨优化
  • OpenCV CUDA模块设备层-----用于CUDA 纹理内存（Texture Memory）的封装类cv::cudev::Texture
  • 《计算机网络·自顶向下方法》第 2 章 应用层
  • 六.架构设计之存储高性能——缓存
  • K8S 专栏 —— namespace和Label篇
  • Gödel Rescheduler：适用于云原生系统的全局最优重调度框架
  • 实现汽车焊装线设备互联：DeviceNet与Modbus TCP协议转换网关
  • 10.C S编程错误分析
  • 数字电路研究的是直流信号还是交流信号
  • 远程桌面连接 - 允许电脑从网络外部访问计算机
  • 当 GitLab 服务器网络配置发生变化,如何修改