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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

大模型——基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程

基于Docker+DeepSeek+Dify :搭建企业级本地私有化知识库超详细教程 下载安装Docker Docker官网:https://www.docker.com/ 自定义Docker安装路径 Docker默认安装在C盘,大小大概2.9G,做这行最忌讳的就是安装软件全装C盘,所以我调整了下安装路径。 新建安装目录:E:\MyS…...