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

vue3 watch watchEffect

watch & watchEffect 函数都是监听器, 用于监视数据的变化; watch 有惰性,watchEffect 无惰性;watch 需要指定具体的监视属性,watchEffect 不需要指定具体的监视属性和配置参数,会自动感知代码依赖;watch 能获取到以前的旧值和新值,watchEffect 只能拿到最新值

一、watch 监听

1、watch 监视 ref 所定义的单个响应式数据

<script setup>
import { watch, computed } from 'vue'
const num = ref(11)watch(// 监视的数据:监视 ref 所定义的单个响应式数据num,// 监视回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置:immediate 的默认值是 false,当值为 true 表示立即执行; deep 表示是否深度监听,这里的 deep 无意义{ immediate: true, deep: true }
)
<script>

2、watch 监视 computed 计算属性

<script setup>
import { watch, computed } from 'vue'
const start = ref(1)
const end = computed(() => start.value + 1)watch(// 监视的数据:监视 computed 计算属性end,// 监视回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置:immediate 的默认值是 false,当值为 true 表示立即执行; deep 表示是否深度监听,这里的 deep 无意义{ immediate: true, deep: true }
)
<script>

3、watch 监视 getter 函数

<script setup>
import { watch, computed } from 'vue'
const messages = ref('this is a mesage')watch(// 监视的数据:监视 getter 函数() => '返回的消息' + messages.value,// 监视回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置:immediate 的默认值是 false,当值为 true 表示立即执行; deep 表示是否深度监听,这里的 deep 无意义{ immediate: true, deep: true }
)
<script>

4、watch 监视由 ref、computed、getter函数 等任意类型组成的数组

<script setup>
import { watch, computed } from 'vue'
const msg = ref('this is a msg')
const n = ref(1)
const count = computed(() => n.value + 1)watch(// 监视的数据:监视由 ref、computed、getter函数 等任意类型组成的数组[msg, n, count, () => n.value + count.value],// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置:immediate 的默认值是 false,当值为 true 表示立即执行; deep 表示是否深度监听,这里的 deep 无意义{ immediate: true, deep: true }
)
<script>

5、watch 监视 reactive 所定义的响应式对象, deep 深度监听默认强制开启,即使监听设置 deep:false 也无效;回调里很难正确的获得 oldValue, 回调的 newVal 和 oldVal 是相同的

<script setup>
import { watch, reactive } from 'vue'
const obj = reactive({name: 'bob',age: 18
})watch(// 监视的数据:监视 reactive 所定义的响应式对象obj,// 监视的回调函数: newVal 和 oldVal 是相同的(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置:immediate 的默认值是 false,当值为 true 表示立即执行; deep 表示是否深度监听,这里的 deep 强制开启,即使手动设置 false 也无效{ immediate: true, deep: false }
)
<script>

6、watch 监视 reactive 所定义的响应式对象的某个属性

<script setup>
import { watch, reactive } from 'vue'
const obj = reactive({name: 'bob',age: 18,sex: '男',score: 90,info: {meta: 'meta'}
})watch(// 监视的数据:监视 reactive 所定义的响应式对象属性 name, 注意这里要用 getter 函数的形式书写,如果直接写 obj.name 则无效() => obj.name,// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)}
)watch(// 监视的数据:监视 reactive 所定义的响应式对象属性 age, 注意这里要用 getter 函数的形式书写,如果直接写 obj.age 则无效 () => obj.age,// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)}
)watch(// 监视的数据:监视 reactive 所定义的响应式对象多个属性[() => obj.sex, () => obj.score],// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)}
)watch(// 监视的数据:监视 reactive 所定义的响应式对象属性 info, 注意这里要用 getter 函数的形式书写,如果直接写 obj.info 则无效 () => obj.info,// 监视的回调函数(newVal, oldVal) => {console.log(newVal, oldVal)},// 监视配置:immediate 的默认值是 false,当值为 true 表示立即执行; deep 表示是否深度监听,这里的 deep 需要开启,因为 obj.info 是一个对象,如果不开启无法深度监听{ immediate: true, deep: true }
)
<script>

7、watch 停止监听 & 重启监听

<script setup lang="ts">
import { watch, reactive } from 'vue'
const visible = ref<boolean>(false)let stopWatch = watch(visible,(newVal, oldVal) => {console.log(newVal, oldVal)},{ immediate: true, deep: true }
)
// 停止监听: 将 watch 赋值给一个变量,当达到条件时就调用这个变量来停止监听
setTimeout(() => {stopWatch()
}, 3000)// 重启监听: 将监听器重新赋值给变量
stopWatch = watch(visible,(newVal, oldVal) => {console.log(newVal, oldVal)},{ immediate: true, deep: true }
)
<script>

二、watchEffect 监听

<script setup>
import { watchEffect, computed, ref,reactive } from 'vue'
const obj = reactive({ name: 'bob',  age: 18 })
const n = ref(1)
const msg = () => n.value + 1
const count = computed(() => n.value + 1)// 只要 watchEffect 中涉及到数据发生变化,就会执行此回调
watchEffect(() => {const objName = obj.name.valueconst nValue = n.valueconst msgValue = msg.valueconst countValue =  count.value
})// 取消监听
const stop = watchEffect(() => {const objName = obj.name.valueconst nValue = n.valuesetTimeout(() => {stop()}, 5000)
})// 重启监听
const stop = watchEffect(() => {const objName = obj.name.valueconst nValue = n.value
})
<script>

对比

对比是否有惰性参数获得值
watch有惰性,数值再次改变后执行监听函数可以侦听多个数据的变化versions参数可以拿到当前值和原始
watchEffect立即执行没有惰性不需要传递侦听内容,自动感知代码依赖不需要传递到很多参数,不能获取原始值

相关文章:

vue3 watch watchEffect

watch & watchEffect 函数都是监听器, 用于监视数据的变化; watch 有惰性&#xff0c;watchEffect 无惰性&#xff1b;watch 需要指定具体的监视属性&#xff0c;watchEffect 不需要指定具体的监视属性和配置参数&#xff0c;会自动感知代码依赖&#xff1b;watch 能获取到…...

lintcode 1410 · 矩阵注水【BFS 中等 vip】

题目链接&#xff0c;描述 https://www.lintcode.com/problem/1410 给一个二维矩阵&#xff0c;每个grid的值代表地势的高度。水流只会沿上下左右流动&#xff0c;且必须从地势高的地方流向地势低的地方。视为矩阵四面环水&#xff0c;现在从(R,C)处注水&#xff0c;问水能否…...

软件架构设计(十) 架构评估(复审)-方法论

我们上一节讲到了为什么么要进行架构的评估, 以及架构评估有哪些质量属性,本节正式来学习架构评估的一些方法论。 再讲到架构评估之前,还需要了解几个概念,也就是风险点,非风险点,敏感点,权衡点等。 风险点:系统架构风险是指架构设计中潜在的,存在问题的架构策略所带…...

SQL注入案例

目录 一、简介 二、案例 1.发现注入点 2.寻找注入类型 3.寻找字段数 4.将传参值设为超出数据量的大值&#xff0c;联合查询找到回显位置 5.找到数据库 6.寻找库中的表 7.寻找表中列 8.查看表中数据 附&#xff1a;SQLMap注入 1.输入指令查数据库 2.输入指令查表 3…...

lv3 嵌入式开发-5 linux shell命令(进程管理、用户管理)

目录 1 进程处理相关命令 1.1 进程的概念 1.2 查看进程的命令 1.3 发送信号命令 2 用户管理相关命令 2.1 用户管理相关文件介绍 2.2 用户管理相关命令介绍 1 进程处理相关命令 1.1 进程的概念 进程的概念主要有两点&#xff1a; 进程是一个实体。每一个进程都有它自己…...

学习Bootstrap 5的第六天

目录 信息警告框 警告框 实例 警告框链接 实例 关闭警告框 实例 警告框动画 实例 按钮 按钮样式 实例 按钮轮廓 实例 ​编辑按钮尺寸 实例 块级按钮 实例 实例 活动/禁用按钮 实例 加载器按钮 实例 扩展小知识 按钮组 按钮组 实例 实例 垂直按钮组…...

攻防世界-WEB-NewsCenter

打开环境 有查询&#xff0c;猜测是sql注入 保存请求头到文件中 准备利用sqlmap 查找数据库 python sqlmap.py -r ./123.txt --dbs 查找表 python sqlmap.py -r ./123.txt --tables -D news 查找字段 python sqlmap.py -r ./123.txt --column -D news -T secret_table 显示字…...

vue router 路由跳转获取不到参数

问题&#xff1a; 路由传参一直不能获取到参数, 未出现报错 原因&#xff1a; 混淆 query 和 params 的使用方法, 在使用 params 传参时错误的使用了 path 代码&#xff1a; 正确写法1&#xff1a; 使用path要对应query ...this.$router.push({path: /Health,query: {title:…...

将 Llama2 中文模型接入 FastGPT,再将 FastGPT 接入任意 GPT 套壳应用,真刺激!

FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01; Llama2 是Facebook 母公司 Meta 发布的开源可商用大模型&#xff0c;国内的…...

Ubuntu之apt-get系列--apt-get安装软件的方法/教程

原文网址&#xff1a;Ubuntu之apt-get系列--apt-get安装软件的方法/教程_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Ubuntu使用apt-get安装软件的方法。 安装软件 先更新列表 sudo apt-get update 安装软件 sudo apt-get install <package name>[<version>]…...

redux的理解

技术栈&#xff1a; react redux webpack react-router ES6/7/8 immutable 运行项目&#xff08;nodejs 6.0&#xff09; git clone https://github.com/bailicangdu/react-pxq.gitcd react-pxqnpm i 或者运行 yarn(推荐)npm startnpm run build &#xff08;发布&…...

【Java】Java 多线程的应用场景

文章目录 前言多线程的常见应用场景多线程使用的主要目的在于业务需求程序设计代码示例运行结果总结 前言 Java多线程程序设计到的知识&#xff1a; 对同一个数量进行操作 对同一个对象进行操作 回调方法使用 线程同步&#xff0c;死锁问题 线程通信 … 多线程的常见应用…...

Mysql--技术文档--索引-《索引为什么查找数据快?》-超底层详细说明索引

索引的概念 在MySQL中&#xff0c;索引是一种数据结构&#xff0c;它被用于快速查找、读取或插入数据。索引能够极大地提高数据库查询的速度。 索引的工作方式类似于图书的索引。如果你想在图书馆找到一本书&#xff0c;你可以按照书名进行查找。书名就像是一个索引&#xf…...

jmeter 接口快速创建

通过cURL命令创建测试计划 从浏览器获取接口 从postman获取接口...

docker 笔记10:Docker轻量级可视化工具Portainer

1. 是什么 Portainer 是一款轻量级的应用&#xff0c;它提供了图形化界面&#xff0c;用于方便地管理Docker环境&#xff0c;包括单机环境和集群环境。 2.安装 https://docs.portainer.io/v/ce-2.9/start/install/server/docker/linux 步骤 docker命令安装 docker run -d …...

028:vue上传解析excel文件,列表中输出内容

第028个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…...

在VR全景中嵌入3D模型有哪些优势?

现阶段&#xff0c;很多商企都会引入VR全景展示来宣传推广自己的产品、服务以及环境&#xff0c;但是环境展示凸显的沉浸式体验只是 VR全景一部分的价值所在&#xff0c;商企使用VR全景还有一个优势就是互动性&#xff0c;通过丰富多样的互动性&#xff0c;让用户同VR场景中的物…...

c高级day2 linux指令的补充和shell脚本

思维导图 写一个1.sh脚本&#xff0c;将以下内容放到脚本中&#xff1a; 在家目录下创建目录文件&#xff0c;dir 在dir下创建dir1和dir2 把当前目录下的所有文件拷贝到dir1中&#xff0c; 把当前目录下的所有脚本文件拷贝到dir2中 把dir2打包并压缩为dir2.tar.xz 再把di…...

Rabbitmq 常见问题处理

Rabbitmq queue NaN status code 如下图&#xff1a; 参考文章 ## https://groups.google.com/g/rabbitmq-users/c/4MlYbOXvy4E## https://groups.google.com/g/rabbitmq-users/c/SsXtN165_30### https://www.cnblogs.com/weschen/p/13321817.html### https://community.piv…...

人工智能和大数据:跨境电商如何实现定制化营销?

在跨境电商竞争激烈的市场中&#xff0c;如何精准地满足消费者的需求并提供个性化的购物体验成为了商家们面临的重要挑战。幸运的是&#xff0c;人工智能和大数据技术的崛起为跨境电商带来了新的机遇&#xff0c;使得定制化营销成为可能。本文将探讨人工智能和大数据在跨境电商…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...