【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(上)

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!
请添加图片描述

文章目录

  • 🍋介绍
  • 🍋情况一:监视【ref】定义的基本数据类型
  • 🍋情况二:监视【ref】定义的对象类型数据
  • 🍋与Vue2中watch的比较
  • 🍋总结

🍋介绍

在Vue3中,watch 函数是一个非常强大且常用的功能,用于监视数据的变化并执行相应的操作。本文将深入探讨Vue3中的watch监视功能,包括基本用法、高级用法以及与Vue2中watch的比较。

  • 特点:Vue3中的watch只能监视以下四种数据
  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值(getter函数)。
  4. 一个包含上述内容的数组。

🍋情况一:监视【ref】定义的基本数据类型

首先我们准备好需要的代码

<template><div class="person"><h2>求和:{{ sum }}</h2><button @click="changeSum">Sum+1</button>
</div></template><script lang="ts" setup name="Person11">import {ref} from 'vue'let sum = ref(0)function changeSum (){sum.value +=1}   </script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

接下来我们将watch导入一下

    import {ref,watch} from 'vue'

接下来我们定义监视

watch(sum, (newValue,oldValue)=>{console.log(newValue,oldValue)})

运行结果如下
在这里插入图片描述
如果我们想要停止监视呢

const stopWatch = watch(sum, (newValue,oldValue)=>{console.log(newValue,oldValue)if(newValue >= 5){stopWatch()}})

运行结果如下在这里插入图片描述
注意在这里插入图片描述

🍋情况二:监视【ref】定义的对象类型数据

监视ref定义的【对象类型】数据:直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。

注意:

  • 若修改的是ref定义的对象中的属性,newValueoldValue 都是新值,因为它们是同一个对象。

  • 若修改整个ref定义的对象,newValue 是新值, oldValue 是旧值,因为不是同一个对象了。
    准备代码数据如下

<template><div class="person"><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button>
</div></template><script lang="ts" setup name="Person11">import {ref,watch} from 'vue'let person = ref({name:"馒头",age:22})function changeName(){person.value.name += '*'}function changeAge(){person.value.age += 1}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

接下来为了测试更明显,我们将watch写出来,并添加一个button,用来修改Person整体而并非是其中的数据

<template><div class="person"><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改人</button>
</div></template><script lang="ts" setup name="Person11">import {ref,watch} from 'vue'let person = ref({name:"馒头",age:22})function changeName(){person.value.name += '*' }function changeAge(){person.value.age += 1}function changePerson(){person.value = {name:'小馒头',age:23}}watch(person,(newValue,oldValue)=>{console.log(newValue,oldValue)})</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

当我们点击修改名字和修改年龄的时候是没有触发监视的,但是当点击修改Person的时候,就会触发了,这其实是监视对象的地址如下图
在这里插入图片描述
如果我们想监视对象内部的数据,那么我们需要开启深度监视,这样我们就会都监视了
在这里插入图片描述
扩展:如果你希望在监听器被设置时立即执行一次回调函数,你可以将 immediate 设置为 true。

 { immediate: true }

🍋与Vue2中watch的比较

在Vue2中,watch的使用方式与Vue3有些许不同。Vue2中的watch是一个选项,可以在watch对象中直接定义需要监视的数据和回调函数。而在Vue3中,watch函数更加灵活,可以在任何地方使用,并支持监视多个数据和深层次的数据。

总的来说,Vue3中的watch函数提供了更加灵活和强大的功能,能够更好地满足复杂项目的需求。

🍋总结

通过本文的介绍,我们了解了Vue3中的watch监视功能的基本用法、高级用法以及与Vue2中watch的比较。watch函数是Vue3响应式系统的核心功能之一,能够帮助我们更好地监视数据的变化,并在数据变化时执行相应的操作。下一节接着介绍其他情况~~~

请添加图片描述

挑战与创造都是很痛苦的,但是很充实。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/703826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

携程token算法分析

声明 本文以教学为基准、本文提供的可操作性不得用于任何商业用途和违法违规场景。 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任。 如有侵权,请联系我进行删除。 这里只是我分析的分析过程,以及一些重要点的记录…

[云原生] k8s中kubectl陈述式资源管理

一、管理k8s核心资源的两种基本方法 陈述式资源管理方法 --主要依赖命令行工具kubectl进行管理 优点 可以满足90%以上的使用场景 对资源的增、删、查操作比较容易 缺点 命令冗长&#xff0c;复杂&#xff0c;难以记忆 特定场景下&#xff0c;无法实现管理需求 对资源的修改…

每日汇评:英镑可能走高,而1.2650支撑位保持不变

英镑/美元上周收于正值区域&#xff1b; 1.2650是该货币对的关键近期支撑位&#xff1b; 如果市场情绪恶化&#xff0c;该货币对的上涨空间可能仍然有限&#xff1b; 英镑/美元利用围绕美元的广泛抛售压力&#xff0c;自 1 月初以来首次录得周涨幅。 周一早盘该货币对稳定在 1.…

TF-A之供应链威胁模型分析

目录 一、简介 二、TF-A 概述 2.1、TF-A 存储库 2.2、外部依赖 2.3、附加二进制文件 2.4、TF-A工具链 2.5、基础设施 三、TF-A

Premiere企业发展历程公司历史回顾视频制作pr时间线模板

企业发展历程公司历史回顾视频制作PR时间线模板mogrt。 项目特点&#xff1a;色彩控件&#xff0c;适用于任何字体&#xff0c;包含视频帮助&#xff0c;适用于Premiere Pro 2021及以上版本。 更多PR资源下载&#xff1a;https://prmuban.com/37916.html

java环境搭建

1.jdk下载安装 下载 https://www.oracle.com/java/technologies/downloads/ jdk21 安装完成 java.exe是执行程序 javac.exe是编译工具 配置JAVA_HOME 环境变量 java环境变量设为变量JAVA_HOME 加上bin,以后只用更改JAVA_HOME地址即可 2.idea安装 下载 https://www.jet…

UDP套接字使用connect函数

在Linux环境下&#xff0c;UDP套接字可以使用connect函数。虽然UDP是无连接的协议&#xff0c;但是使用connect函数可以为UDP套接字设置一个默认的目标地址。 这样做有几个好处&#xff1a; 减少发送数据时的参数&#xff1a;当你使用connect函数为UDP套接字设置了一个目标地址…

Python 开发转 Java 简易路线 - 完结

有了 Python 开发基础&#xff0c;Java 的内容都可以快速过一遍&#xff0c;复杂地方跟着写一遍。 个人博客&#xff08;可参考&#xff09;&#xff1a;https://itnxd.eu.org/ 一、基础 1、Java 基础&#xff1a;尚硅谷 - Java基础 全部快速过一遍&#xff0c; 2、数据库&a…

动态规划(算法竞赛、蓝桥杯)--最详细的01背包DP问题滚动数组优化

1、B站视频链接&#xff1a;E08【模板】背包DP 01背包_哔哩哔哩_bilibili 题目链接&#xff1a;[USACO07DEC] Charm Bracelet S - 洛谷 #include <bits/stdc.h> using namespace std; const int N3410,M13000; int n,m; int d[N],w[N],f[N][M];//价值、体积、状态数组 …

Linux 软链接与硬链接

目录 创建软链接 创建硬链接 删除软链接 软链与硬链区别 创建软链接 软链接是一个指向另一个文件或目录的引用&#xff0c;类似于Windows系统中的快捷方式。 ln -s [目标文件路径] [链接文件名] 例如&#xff0c;要在当前目录下创建一个名为link_file的软链接&#xff0c…

Odoo系统安装部署并结合内网穿透实现固定域名访问本地ERP系统

文章目录 前言1. 下载安装Odoo&#xff1a;2. 实现公网访问Odoo本地系统&#xff1a;3. 固定域名访问Odoo本地系统 前言 Odoo是全球流行的开源企业管理套件&#xff0c;是一个一站式全功能ERP及电商平台。 开源性质&#xff1a;Odoo是一个开源的ERP软件&#xff0c;这意味着企…

AP5219 DC-DC降压恒流芯片 2.5A 全亮 半亮 摩托电动车灯IC

产品描述 AP5219 是一款 PWM工作模式, 高效率、外 围简单、内置功率管&#xff0c;适用于 5V&#xff5e;100V 输入的高 精度降压 LED 恒流驱动芯片。输出最大功率可达 25W&#xff0c;最大电流 2.5A。 AP5219 可实现全亮/半亮功能切换&#xff0c;通过 MODE 切换&#x…

Docker基础(二)

文章目录 1. 可视化工具2. Docker镜像详解2.1 镜像commit 3. 容器数据卷3.1 使用数据卷3.2 安装mysql实操案例3.3 Dockerfile挂载数据卷3.4 具名挂载和匿名挂载3.5 数据卷容器 4. DockerFile4.1 构建一个自己的centos4.2 编写DockerFile步骤 5. 发布镜像5.1 共有仓库5.2 私有仓…

代码随想录训练营第41天| 卡码网46. 携带研究材料、416. 分割等和子集

46. 携带研究材料 题目链接&#xff1a;题目页面 (kamacoder.com) 二维dp数组&#xff1a; import java.util.*; public class Main{public static void main(String[] args) {Scanner sc new Scanner(System.in);int m sc.nextInt();int n sc.nextInt();int[] space ne…

如何通过信息化系统降低连锁品牌企业的财务成本

最近身边几个做连锁品牌的朋友问&#xff0c;能不能通过信息化系统降低连锁管理门店的财务成本&#xff0c;让整体的运营合法合规&#xff0c;降低税收成本。今天商淘云和大家分享如何通过信息化系统降低连锁管理门店的财务成本。 传统的连锁门店是大家自动核对账目&#xff0c…

HttpServlet详解

Servlet与HttpServlet详解 一、Servlet概述 Servlet&#xff08;Server Applet&#xff09;是Java Servlet API中定义的一个接口&#xff0c;用于扩展Web服务器的功能。Servlet是一个运行在Web服务器或应用服务器上的Java程序&#xff0c;它可以动态地生成Web页面或其他类型的…

【云原生】Spring Cloud Gateway的底层原理与实践方法探究

&#x1f389;&#x1f389;欢迎光临&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;特别推荐给大家我的最新专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &#x1f680; 本…

Leetcode. 739 每日温度

题目信息 LeetoCode地址: . - 力扣&#xff08;LeetCode&#xff09; 题目理解 题意很好理解&#xff0c;找到比每日温度更高的温度的已过天数的偏移量。如果找不到&#xff0c;则设为0。 最直观的想法是&#xff0c;从每一天开始向后一天一天找&#xff0c;直到找到更高温…

fly-barrage 前端弹幕库(2):弹幕内容支持混入渲染图片的设计与实现

如果弹幕内容只支持文字的话&#xff0c;只需要借助 canvas 绘图上下文的 fillText 方法就可以实现功能了。 但如果想同时支持渲染图片和文字的话&#xff0c;需要以下几个步骤&#xff1a; 设计一个面向用户的数据结构&#xff0c;用于描述弹幕应该渲染哪些文字和图片&#x…

SpringBoot MultipartResolver原理

Spring Boot中的MultipartResolver是一个用于解析multipart/form-data类型请求的策略接口。这种类型的请求通常用于文件上传。Spring Boot中默认实现了两个MultipartResolver的接口&#xff1a;CommonsMultipartResolver和StandardServletMultipartResolver。 1. MultipartRes…