当前位置: 首页 > 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;使得定制化营销成为可能。本文将探讨人工智能和大数据在跨境电商…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

《C++ 模板》

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

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...