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

Vue3-ref、reactive函数的watch

Vue3-ref、reactive函数的watch

ref函数的watch

  • 原理:监视某个属性的变化。当被监视的属性一旦发生改变时,执行某段代码。
  • watch 属性中的数据需要具有响应式
  • watch 属性可以使用箭头函数
  • watch 属性可以监视一个或者多个响应式数据,并且可以配置 immediate(立即执行) 和 deep(深度侦听)搭配使用
// 监视一个响应式数据
watch(监视的数据, (newValue, oldValue) => { ... }, {immediate : true, deep : true})// 监视多个响应式数据
// 第一种 有多少个监视数据就写多少个watch
watch(监视的数据1, (newValue, oldValue) => { ... }, {immediate : true, deep : true})
watch(监视的数据2, (newValue, oldValue) => { ... }, {immediate : true, deep : true})// 第二种 数组形式
watch([监视的数据1, 监视的数据2], (newValue, oldValue) => { ... }, {immediate : true, deep : true})
// App.vue
<template><h2>计数器1{{counter1}}</h2><h2>计数器2{{counter2}}</h2><button @click="counter1++">计数器11</button><br><button @click="counter2++">计数器21</button>
</template><script>import { watch, ref } from 'vue'export default {namme : 'App',setup(){let counter1 = ref(1)let counter2 = ref(100)watch(counter1, (newValue, oldValue) => {console.log('计数器1', newValue, oldValue);})watch(counter2, (newValue, oldValue) => {console.log('计数器2', newValue, oldValue);})// 采用数组的方式,一次性监视多个属性watch([counter1, counter2], (newValue, oldValue) => {console.log(newValue, oldValue);})return {counter, counter2}}}
</script>

reactive函数的watch

  • reactive函数在 watch 属性中的注意事项:
    • 当watch中的侦听数据是reactive函数的一个对象时:
      • 在watch中是无法获取到oldValue的,只能获取到newValue。
      • 在没使用箭头函数的基础上,watch 属性默认开启deep(深度侦听)的,并且deep无法被取消,即便是在watch 属性的末尾加上 {deep : false} 也没有用。
      • 使用箭头函数调用对象,虽然无法获取oldValue,但是deep设置有效
    • 当watch中的侦听数据是reactive函数的是基本数据类型时:
      • 在watch中侦听基本数据类型,需要使用箭头函数
      • 使用箭头函数调用基本数据类型,才能获取到oldValue
  • watch 属性可以监视一个或者多个响应式数据
// 监视一个对象
// 不使用箭头函数,deep设置无效,oldValue获取不到
watch(对象, (newValue, oldValue) => { ... }, {immediate : true})// 使用箭头函数,oldValue获取不到,deep设置有效
watch(() => 对象, (newValue, oldValue) => { ... }, {immediate : true, deep : false})// 监视一个基本数据类型 使用箭头函数,获取到oldValue
watch(() => 基本数据类型, (newValue, oldValue) => { ... })// 监视多个 数组形式,使用箭头函数,获取到oldValue
watch([() => 基本数据类型, () => 基本数据类型], (newValue, oldValue) => { ... })
// App.vue
<template><h2>计数器1{{data.counter1}}</h2><h2>计数器2{{data.a.counter2}}</h2><button @click="data.counter1++">计数器11</button><br><button @click="data.a.counter2++">计数器21</button>
</template><script>import { reactive, watch } from 'vue'export default {name : 'App',setup(){let data = reactive({counter1 : 1,a : {counter2 : 100}})// data是一整个对象,oldValue是拿不到的,默认开启deep(deep设置无效)watch(data, (newValue, oldValue) => {console.log(newValue, oldValue);}, {deep : false})// data.counter1是一个基本数据类型,可以获取到oldValuewatch(() => data.counter1, (newValue, oldValue) => {console.log(newValue, oldValue);})// data.a是一个对象,deep设置有效,oldValue无法获取watch(() => data.a, (newValue, oldValue) => {console.log(newValue, oldValue);}, {deep : false})// data.a.counter2是基本数据类型,可以获取oldValuewatch(() => data.a.counter2, (newValue, oldValue) => {console.log(newValue, oldValue);})// data.counter1 和 data.a.counter2是基本数据类型,数组形式,可以获取oldValuewatch([() => data.counter1, () => data.a.counter2], (newValue, oldValue) => {console.log(newValue, oldValue);})return {data}}}
</script>

相关文章:

Vue3-ref、reactive函数的watch

Vue3-ref、reactive函数的watch ref函数的watch 原理&#xff1a;监视某个属性的变化。当被监视的属性一旦发生改变时&#xff0c;执行某段代码。watch 属性中的数据需要具有响应式watch 属性可以使用箭头函数watch 属性可以监视一个或者多个响应式数据&#xff0c;并且可以配…...

【智能家居项目】FreeRTOS版本——多任务系统中使用DHT11 | 获取SNTP服务器时间 | 重新设计功能框架

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《智能家居项目》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f353;多任务系统中使用DHT11&#x1f345;关闭调度器&#x1f345;使用中断 &am…...

Power BI Desktop数据可视化图表

...

鸿蒙APP外包开发需要注意的问题

在进行鸿蒙&#xff08;HarmonyOS&#xff09;应用开发时&#xff0c;开发者需要注意一些重要的问题&#xff0c;以确保应用的质量、性能和用户体验。以下是一些鸿蒙APP开发中需要特别关注的问题&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软…...

Redis 19 事务

Redis通过MULTI、EXEC、WATCH等命令来实现事务&#xff08;transaction&#xff09;功能。事务提供了一种将多个命令请求打包&#xff0c;然后一次性、按顺序地执行多个命令的机制&#xff0c;并且在事务执行期间&#xff0c;服务器不会中断事务而改去执行其他客户端的命令请求…...

Fabric多机部署启动节点与合约部署

这是我搭建的fabric的网络拓扑 3 个 orderer 节点&#xff1b;组织 org1 , org1 下有两个 peer 节点&#xff0c; peer0 和 peer1; 组织 org2 , org2 下有两个 peer 节点&#xff0c; peer0 和 peer1; 以上是我的多机环境的网络拓扑&#xff0c;使用的是docker搭建的。我的网络…...

WordPress主题WoodMart v7.3.2 WooCommerce主题和谐汉化版下载

WordPress主题WoodMart v7.3.2 WooCommerce主题和谐汉化版下载 WoodMart是一款出色的WooCommerce商店主题&#xff0c;它不仅提供强大的电子商务功能&#xff0c;还与流行的Elementor页面编辑器插件完美兼容。 主题文件在WoodMart Theme/woodmart.7.3.2.zip&#xff0c;核心在P…...

Java 高等院校分析与推荐系统

1&#xff09;项目简介 随着我国高等教育的大众化&#xff0c;高校毕业生就业碰到了前所未有的压力&#xff0c;高校学生就业问题开始进入相关研究者们的视野。在高校学生供给忽然急剧增加的同时&#xff0c;我国高校大学生的就业机制也在发生着深刻的变化&#xff0c;作为就业…...

【JVM】Java虚拟机

本文主要介绍了JVM的内存区域划分,类加载机制以及垃圾回收机制. 其实JVM的初心,就是让java程序员不需要去了解JVM的细节,它把很多工作内部封装好了.但是学习JVM的内部原理有利于我们深入理解学习Java. 1.JVM的内存区域划分 JVM其实是一个java进程 ; 每个java进程,就是一个jvm…...

业务架构、技术架构、项目管理的有机结合

新入职的创业公司一年不行了。 这一年来没有上班&#xff0c;也因为大龄的问题找不到合适的工作。然后考了几个项目管理证书&#xff0c;又思考了一个技术兑现的问题。 技术本身是架构的执行层面&#xff0c;如果上面的公司战略、业务架构变小&#xff0c;缩水&#xff0c;或者…...

拜耳阵列(Bayer Pattern)以及常见彩色滤波矩阵(CFA)

一、拜耳阵列的来源 图像传感器将光线转化成电流&#xff0c;光线越亮&#xff0c;电流的数值就越大&#xff1b;光线越暗&#xff0c;电流的数值就越小。图像传感器只能感受光的强弱&#xff0c;无法感受光的波长。由于光的颜色由波长决定&#xff0c;所以图像传播器无法记录…...

【信息安全】浅谈IDOR越权漏洞的原理、危害和防范:直接对象引用导致的越权行为

前言 ┌──────────────────────────────────┐ │ 正在播放《越权访问》 - Hanser │ ●━━━━━━─────── 00:00 / 03:05 │ ↻ ◁ ❚❚ ▷ ⇆ └───────────────────────────────…...

uni-app 蓝牙打印, CPCL指令集使用

先上代码: GitHub - byc233518/uniapp-bluetooth-printer-demo: 使用uniApp 连接蓝牙打印机 Demo, CPCL 指令简单实用示例 (内含 芝珂,佳博,精臣 多个厂家指令集使用文档) 文件结构: ├── App.vue ├── CPCL 指令手册.pdf // 指令集参考手册 ├── LICENSE ├── R…...

vue-组件通信(二)

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-组件通信(二) 目录 组件通信(二) &#xff08;1&#xff09; props / $emit 1. 父组件向子组…...

2023年【危险化学品经营单位安全管理人员】考试题及危险化学品经营单位安全管理人员模拟试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品经营单位安全管理人员考试题是安全生产模拟考试一点通总题库中生成的一套危险化学品经营单位安全管理人员模拟试题&#xff0c;安全生产模拟考试一点通上危险化学品经营单位安全管理人员作业手机同步练习。…...

Uni-App常用事件

Uni-App是一个跨平台的前端开发框架&#xff0c;支持多个平台的应用开发&#xff0c;包括H5、小程序、App等。在Uni-App中&#xff0c;有许多常用的事件可以用来处理用户交互、页面生命周期等方面的逻辑。以下是一些Uni-App中常用的事件&#xff1a; 点击事件&#xff08;click…...

【笔记 Pytorch】稀疏矩阵、scipy.sparse模块的使用

安装&#xff1a;pip install scipy 描述&#xff1a;就是专门为了解决稀疏矩阵而生。导入模块&#xff1a;from scipy import sparse 优缺点总结 七种矩阵类型描述coo_matrix ★【名称】coordinate format 【优点】    ① 不同稀疏格式间转换效率高(特别是CSR和CSC)  …...

C#学习相关系列之Linq常用方法---排序(一)

一、构建数据 public class Student_1{public int ID { get; set; }public string Name { get; set; }public int Chinese { get; set; }public int Math { get; set; }public int English { get; set; }public override string ToString(){return string.Format("ID:{0},…...

Android Proguard混淆

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、语法规则3.1 输入/输出选项3.2 保留选项3.3 缩…...

MySQL 1、初识数据库

一、什么是数据库&#xff1f; 以特定的格式保存好的文件&#xff0c;我们就叫做数据库。 提供较为便捷的数据的存取服务的软件集合、解决方案&#xff0c;我们就叫它数据库。 存储数据用文件就可以了&#xff0c;为什么还要弄个数据库。 文件或数据库都可以存储数据&#…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...