当前位置: 首页 > 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;为什么还要弄个数据库。 文件或数据库都可以存储数据&#…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

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

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

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...