Vue3中watch用法
在 Vue3 中的组合式 API 中,watch
的作用和 Vue2 中的 watch
作用是一样的,他们都是用来监听响应式状态发生变化的,当响应式状态发生变化时,都会触发一个回调函数。
当需要在数据变化时执行异步或开销较大的操作时,computed是无法操作异步数据的,所以需要使用watch进行侦听。
侦听器watch作用是侦听一个或多个数据的变化,数据变化时执行的回调函数,两个额外参数:immediate
(立即执行)和deep
(深度侦听)
官网传送门
watch 基本使用
<script setup lang="ts">
import { ref, watch } from 'vue'const message = ref(0)
watch(message, (newValue, oldValue) => {console.log('新的值:', newValue)console.log('旧的值:', oldValue)
})
const changeMsg = () => {message.value++
}
</script>
<template><p>{{ message }}</p><button @click="changeMsg">更改 message</button>
</template>
上段代码中我们点击按钮就会更改响应式变量 message 的值。我们又使用 watch
监听器监听了 message 变量,当它发生变化时,就会触发 watch
监听函数中的回调函数,并且回调函数默认接收两个参数:新值和旧值。
watch 监听类型
ref 和计算属性
<script setup lang="ts">
import { ref, watch, computed } from 'vue'const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch(doubleCount, (newValue, oldValue) => {console.log('新的值:', newValue)console.log('旧的值:', oldValue)
})
const changeCount = () => {count.value++
}
</script>
<template><p>{{ count }}</p><button @click="changeCount">更改 count</button>
</template>
当我们 count 发生变化时,计算属性 doubleCount也会重新计算得出新的结果,我们 watch 监听函数是可以监听到计算属性变化的。
getter 函数
<script setup lang="ts">
import { ref, watch, computed } from 'vue'const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch(() => count.value + doubleCount.value,(newValue, oldValue) => {console.log('新的值:', newValue)console.log('旧的值:', oldValue)}
)
const changeCount = () => {count.value++
}
</script>
<template><p>{{ count }}</p><button @click="changeCount">更改 count</button>
</template>
上段代码中 watch
监听器中的第一个参数是一个箭头函数,也就是 getter 函数,getter 函数返回的是响应式数据 count 和 doubleCount 相加的值,当这两个中中有一个变化,都会执行 watch
中的回调函数。有点像是直接把计算属性写到监听器里面去了。
监听响应式对象
<script setup lang="ts">
import { reactive, watch } from 'vue'const count = reactive({ num: 0 })
watch(count, (newValue, oldValue) => {console.log('新的值:', newValue)console.log('旧的值:', oldValue)
})
const changeCount = () => {count.num++
}
</script>
<template><p>{{ count }}</p><button @click="changeCount">更改 count</button>
</template>
当 watch 监听的是一个响应式对象时,会隐式地创建一个深层侦听器,即该响应式对象里面的任何属性发生变化,都会触发监听函数中的回调函数。
监听多个来源的数组
<script setup lang="ts">
import { ref, watch, computed } from 'vue'const count = ref(0)
const doubleCount = computed(() => count.value * 2)
watch([count, doubleCount], (newValue, oldValue) => {console.log('新的值:', newValue)console.log('旧的值:', oldValue)
})
const changeCount = () => {count.value++
}
</script>
<template><p>{{ count }}</p><button @click="changeCount">更改 count</button>
</template>
深度监听
在前面的代码中,如果我们将一个响应式对象传递给 watch
监听器时,只要对象里面的某个属性发生了变化,那么就会执行监听器回调函数。
究其原因,因为我们传入响应对象给 watch
时,隐式的添加一个深度监听器,这就让我们造成了我们牵一发而至全身的效果。
但是,如果我们是使用的 ref
响应式对象的形式,那么响应式对象的属性值发生变化,是不会触发 watch
的回调函数的。
<script setup lang="ts">
import { ref, watch, computed } from 'vue'const count = ref({ num: 0 })
watch(count,(newValue, oldValue) => {console.log('新的值:', newValue)console.log('旧的值:', oldValue)}
)
const changeCount = () => {count.value.num++
}
</script>
<template><p>{{ count }}</p><button @click="changeCount">更改 count</button>
</template>
上段代码中我们使用 ref
响应式对象,当我们更改 number 中 count 的值时,watch
的回调函数是不会执行的。
为了实现上述代码的监听,我们可以手动给监听器加上深度监听的效果。
<script setup lang="ts">
import { ref, watch, computed } from 'vue'const count = ref({ num: 0 })
watch(count,(newValue, oldValue) => {console.log('新的值:', newValue)console.log('旧的值:', oldValue)},{ deep: true }
)
const changeCount = () => {count.value.num++
}
</script>
<template><p>{{ count }}</p><button @click="changeCount">更改 count</button>
</template>
immediate
在侦听器创建时立即触发回调,响应式数据变化之后继续执行回调,用法如下:
<script setup lang="ts">
import { ref, watch } from 'vue'const count = ref({ num: 0 })
watch(count,(newValue, oldValue) => {console.log('新的值:', newValue)console.log('旧的值:', oldValue)},{ immediate: true }
)
const changeCount = () => {count.value.num++
}
</script>
<template><p>{{ count }}</p><button @click="changeCount">更改 count</button>
</template>
watch
监听回调函数会再创建时立即执行
提示
前面我们一直强调 watch
监听的是响应式数据,如果我们监听的数据不是响应式的,那么可能会抛出如下警告:
runtime-core.esm-bundler.js:41 [Vue warn]: Invalid watch source: 123 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > at <RouterView> at <ElMain> at <ElContainer> at <ElContainer class="layout-container" > at <LayoutPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > at <RouterView> at <App>
相关文章:

Vue3中watch用法
在 Vue3 中的组合式 API 中,watch 的作用和 Vue2 中的 watch 作用是一样的,他们都是用来监听响应式状态发生变化的,当响应式状态发生变化时,都会触发一个回调函数。 当需要在数据变化时执行异步或开销较大的操作时,com…...

组里来了一个实习生,一行代码引发了一个惨案
大家好,我是静幽水,一名大厂全栈程序员,今天给大家分享一个案例,看似简单。却容易引发惨案。 事情是这样的,最近组里来了一个实习生,因为项目工作量大,人力比较紧张,所以就分配了一…...

随手笔记(四十五)——idea git冲突
图片为引用,在一次导入项目至gitee的过程中,不知道为什么报了403,很奇怪的一个错误,网上很多的答案大概分成两种。 第一种是最多的,直接找到windows凭据删掉 很抱歉的告诉各位,你们很多人到这里就已经解…...

chacha20 算法流程
chacha20算法请参看 RFC:7539。下面是我的理解,欢迎指正。 chacha20算法的基本思想:加密时,将明文数据与用户之间约定的某些数据进行异或操作,得到密文数据;由异或操作的特点可知,在解密时,只需…...

准备篇(三)Python 爬虫第三方库
第三方库无法将 "pip" 识别ModuleNotFoundError: No module named pip install 安装路径相关问题requests 库和 BeautifulSoup 库requests 库BeautifulSoup 库第三方库 Python 的 标准库 中提供了许多有用的模块和功能,如字符串处理、网络通信、多线程等,但它们并…...

从零开始的PICO开发教程(4)-- VR世界 射线传送、旋转和移动
从零开始的PICO开发教程(4)-- VR世界 射线传送、旋转和移动 文章目录 从零开始的PICO开发教程(4)-- VR世界 射线传送、旋转和移动一、前言1、大纲 二、VR射线移动功能实现与解析1、区域传送(1)新建 XR Orig…...

防止攥改之水印功能组件
防止攥改之水印功能组件 效果图逻辑代码 效果图 逻辑代码 <template><div class"containerBox" ref"parentRef" style"height: 300px;background-color: red;"><slot></slot></div> </template><script…...

iOS 17 适配 Xcode 15 问题
在适配 iOS 17 xcode 15时遇到的问题,记录一下。 1、 Could not build module ‘WebKit’ type argument nw_proxy_config_t (aka struct nw_proxy_config *) is neither an Objective-C object nor a block type解决方案: 选中不能编译的库的xcodep…...

Element Plus 快速开始
1.完整引入(全局引入) // main.ts import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vueconst app createApp(App)app.use(ElementPlus) app.mount(#app) npm install e…...

华为云云耀云服务器L实例评测|StackEdit中文版在线Markdown笔记工具
华为云云耀云服务器L实例评测|StackEdit中文版在线Markdown笔记工具 一、云耀云服务器L实例介绍1.1 云服务器介绍1.2 应用场景1.3 支持镜像 二、云耀云服务器L实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 StackEdit 中文版3.1 StackEdit 介绍3.2 环…...

MyEclipse报错javax/persistence/EntityManagerFactory
MyEclipse报错: Build path is incomplete. Cannot find class file for javax/persistence/EntityManagerFactory 解决方案: 引入依赖 <dependency><groupId>javax.persistence</groupId> <artifactId>persistence-api</a…...

【MySQL进阶】SQL性能分析
一、SQL性能分析 1.SQL执行频率 MySQL 客户端连接成功后,通过 show [session|global] status 命令可以提供服务器状态信 息。通过如下指令,可以查看当前数据库的 INSERT 、 UPDATE 、 DELETE 、 SELECT 的访问频次: -- session 是查看当…...

在SpringBoot项目中整合SpringSession,基于Redis实现对Session的管理和事件监听
1、SpringSession简介 SpringSession是基于Spring框架的Session管理解决方案。它基于标准的Servlet容器API,提供了Session的分布式管理解决方案,支持把Session存储在多种场景下,比如内存、MongoDB、Redis等,并且能够快速集成到Spr…...

浅析vue中computed,method,watch,watchEffect的区别
方法methods只要调用每次都会执行watch(惰性)只有依赖项更新才会执行回调函数,且组件初次渲染不会执行watchEffect:自动追踪依赖变化,只要依赖更新即执行回调函数,且组件初次渲染即执行回调函数computed(惰性): 返回一个只读的ref,具有缓存功…...

activiti7的数据表和字段的解释
activiti7的数据表和字段的解释 activiti7版本有25张表,而activiti6有28张表,activiti5有27张表,绝大部分的表和字段的含义都是一样的,所以本次整理的activiti7数据表和字段的解释,也同样适用于activiti6和5。 1、总览…...

Java手写Trie树和Trie树应用拓展案例
Java手写Trie树和Trie树应用拓展案例 1. 算法思维导图 以下是使用mermaid代码表示的Trie树的实现原理: #mermaid-svg-5twy24X7Wqbhyulb {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-5twy24X7Wqbhyul…...

alova.js快速入门教程
官网地址:Alova.JS - Lightweight request strategy library | Alova.JS 目录 一、alova 是什么? 二、 快速入门 1、安装依赖 (1)使用npm方式安装 (2)使用yarn方式安装 2、在静态 html 中使用 一、al…...

获取IP地址-根据IP获取位置信息
获取外网IP地址,并得到该地址所在位置; 如:101.249.255.255 对应:西藏自治区-拉萨市-堆龙德庆区 string ipAddress GetIPAddress(); string location GetIPLocation(ipAddress); /// <summary>/// 获取IP地址/// </s…...

Android13适配-Google官方照片视频选择器
官方照片选择器 图 1. 照片选择器提供了一个直观的界面,便于与您的应用分享照片。 照片选择器的界面可供浏览和搜索,并按日期降序向用户显示其媒体库中的文件。如隐私保护最佳实践 Codelab 中所示,照片选择器为用户提供了一种安全的内置授权…...

云计算的发展趋势和挑战
本文将探讨云计算的发展趋势和挑战,旨在帮助读者了解云计算的最新动态和未来发展方向。 随着信息技术的发展,云计算作为一种新兴的计算模式,已经得到了广泛的应用和认可。它通过将计算资源、存储资源和应用程序等服务通过互联网提供给用户&a…...

PyG-GAT-Cora(在Cora数据集上应用GAT做节点分类)
文章目录 model.pymain.py参数设置运行图 model.py import torch.nn as nn from torch_geometric.nn import GATConv import torch.nn.functional as F class gat_cls(nn.Module):def __init__(self,in_dim,hid_dim,out_dim,dropout_size0.5):super(gat_cls,self).__init__()s…...

java专项练习(验证码)
package 专题练习;import java.util.Random;public class Developing_CAPTCHA {public static void main(String[] args) {/* 需求:定义方法生成一个5位的验证码 验证码长度为5,前四位为大或小写字母,最后一位是数字*///方法: 如果我们要在一堆没有规律的数据中随机抽取,可以先…...

MS1861 视频处理与显示控制器 HDMI转MIPI LVDS转MIPI带旋转功能 图像带缩放,旋转,锐化
1. 基本介绍 MS1861 单颗芯片集成了 HDMI 、 LVDS 和数字视频信号输入;输出端可以驱动 MIPI(DSI-2) 、 LVDS 、 Mini-LVDS 以及 TTL 类型 TFT-LCD 液晶显示。可支持对输入视频信号进行滤波,图 像增强,锐化,对比度调节&am…...

广州华锐互动:利用VR复原文化遗址,沉浸式体验历史文物古迹的魅力
在过去的几十年里,科技发展飞速,为我们打开了无数新的视角和可能性。其中,虚拟现实(Virtual Reality,简称VR)技术的崭新应用,为我们提供了一种全新的、近乎身临其境的体验历史的方式。本文将重点…...

微信小程序——事件监听
微信小程序是一种轻量级的应用程序,它在移动设备上提供了丰富的用户体验。在开发微信小程序时,事件监听是一项重要的技术,它允许开发者捕捉和处理用户的各种操作。本文将介绍微信小程序事件监听的概念、用法和一些实用示例。 1. 什么是事件监…...

View绘制流程的源码所得
一些问题 子线程可以更新 UI 吗 答案是可以的,在特定的情况下可以 可以先在主线程中调用requestLayout() 方法,然后紧接着在子线程中更新UI(原理:不要在子线程触发 checkThread() 方法,而checkThread() 方法的调用时…...

企业级数据仓库-理论知识
D3 AM 大数据中间件 Hive:将SQL转化成分布式Map/Reduce进行运算,也支持转换成Spark,需要单独安装Hive集群才能访问Spark,支持60%的SQL,延迟比较大。SparkSQL:属于Spark生态圈,Hive on Sqark。HBase: NoSQL,高并发读,适…...

解决flutter不识别yaml里面配置的git项目
解决办法找到相应的 git路径,然后手动 git pull 暂时先用这个笨方法,后面有更好的解决办法了再说 studio 自己拉取的项目里面没有ios 和lib包...

rust结构体
一、定义结构体类型 语法 struct Name_of_structure {field1: data_type,field2: data_type,field3: data_type, }注意: 不同于C,Rust的struct语句仅用来定义类型,不能定义实例。 结尾不需要;。 每个字段定义之后用 , 分隔。最后一个逗号可…...

Python - 小玩意 - 键盘记录器
pip install keyboardimport keyboard import timedef get_time():date_time time.strftime("%Y-%m-%d %H:%S", time.localtime())return date_timedef abc(x):if x.event_type down:print(f"{get_time()}你按下了{x.name}")with open(./键盘记录器.txt,…...