Vue3 watch监听器

news/2024/10/18 7:48:46/

 概览:watch监听器的定义以及使用场景。在vue3中的监听器的使用方式,watch的三个参数,以及进一步了解第一个参数可以是一个属性,也可以是一个数组的形式包含多个属性。

watch在vue3和vue2中的使用:

vue3中:

 vue2中:

 watch监听器的定义

watch的概念:侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。

vue中文官网的watch的详解

watch监听某个属性的变化,一旦发生变化,就会触发对应的回调函数执行,在里面进行一些具体的操作,从而达到事件监听的效果。里面有三个参数,下面让我们一起来学习一下。

第一个参数是:选择要监听的属性。

第二个参数是:设置的回调函数。即监听到变化时应该执行的函数 。

第三个参数是:可以设置deep (深度监听) 其值为true和false。还可以设置immediate (是否以当前值执行回调函数) 其值为true和false。

 watch监听reactive定义的响应式数据中存在的问题:

1.监听reactive定义的响应式数据,会强制开启深度监听(deep:true),无法获取正确的oldvalue(变化前的值)。

2.监听reactive定义的响应式数据中的某个属性(对象形式)时,不会强制开启深度监听,需要自己手动设置(deep:true)才会有效果。

 vue3页面组件可以包含多个watch


http://www.ppmy.cn/news/1003121.html

相关文章

G1和CMS

G1垃圾回收器要点: 1.什么是G1垃圾回收器: G1是一款专门针对于拥有多核处理器和大内存的机器的收集器,在满足了GC响应时间的延迟可控的情况下,也会尽可能提高的程序的吞吐量 2.G1垃圾回收器的优点: ①与CMS收集器一…

Docker入门之命令

Docker命令学习方式 docker -h docker run --help # 这种形式参考 # 官方帮助 # https://docs.docker.com/reference/ Docker中命令是一等公民, 容器是为命令服务的,甚至启动容器都是为了执行一个命令 run docker run -i -t --name c1 centos:latest bash # 翻译: docker ru…

【零基础学Rust | 基础系列 | Cargo工具】Cargo介绍及使用

文章目录 前言一,Cargo介绍1,Cargo安装2,创建Rust项目2,编译项目:3,运行项目:4,测试项目:5,更新项目的依赖:6,生成项目的文档&#xf…

《Ansible自动化工具篇:Centos操作系统基于ansible工具一键远程离线部署之K8S1.24.12二进制版集群》

一、部署背景 由于业务系统的特殊性,我们需要针对不同的客户环境部署二进制版K8S集群,由于大都数用户都是专网环境,无法使用外网,为了更便捷,高效的部署,针对业务系统的特性,我这边编写了 基于a…

为Android构建现代应用——应用导航设计

在前一章节的实现中,Skeleton: Main structure,我们留下了几个 Jetpack 架构组件,这些组件将在本章中使用,例如 Composables、ViewModels、Navigation 和 Hilt。此外,我们还通过 Scaffold 集成了 TopAppBar 和 BottomA…

面试之Java基础

1.String与StringBuffer与StringBuilder的区别 1.1概念 String:Java中数据类型分为基本数据类型和引用数据类型,String就属于引用数据类型。String是被final所修饰的类,不可被继承。String类不可被修改,我们对字符串的操作在底层…

【go-zero】docker镜像直接部署API与RPC服务 如何实现注册发现?docker network 实现 go-zero 注册发现

一、场景&问题 使用docker直接部署go-zero微服务会发现API无法找到RPC服务 1、API无法发现RPC服务 用docker直接部署 我们会发现API无法注册发现RPC服务 原因是我们缺少了docker的network网桥 2、系统内查看 RPC服务运行正常API服务启动,通过docker logs 查看日志还是未…

iMX6ULL驱动开发 | OLED显示屏SPI驱动实现(SH1106,ssd1306)

周日业余时间太无聊,又不喜欢玩游戏,大家的兴趣爱好都是啥?我觉得敲代码也是一种兴趣爱好。正巧手边有一块儿0.96寸的OLED显示屏,一直在吃灰,何不把玩一把?于是说干就干,最后在我的imax6ul的lin…