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

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

文章目录

  • 🍋情况三:监视【reactive】定义的对象类型数据
  • 🍋情况四:监视【ref或reactive】定义的对象类型数据中的某个属性
  • 🍋情况五:监视上述的多个数据
  • 🍋总结

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

准备代码如下

<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 {reactive,watch} from 'vue'let person = reactive({name:"馒头",age:22})function changeName(){person.name += '*' }function changeAge(){person.age += 1}function changePerson(){person = {name:'小馒头',age:23}}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

对于之前的ref,我们清楚的知道它可以对整体对象进行修改,也就是上一节的情况二,但是对于reactive来说,并不可以对整体就行修改,那如果我们想要就行整体修改的话,需要做点小修改

  function changePerson(){Object.assign(person,{name:'小馒头',age:23}) }

这样相当于默认开启深度监视(不能使用deep关掉),接下来我们将监视代码写上

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

在这里插入图片描述
这样就可以了

🍋情况四:监视【ref或reactive】定义的对象类型数据中的某个属性

  1. 若该属性值不是【对象类型】,需要写成函数形式。
  2. 若该属性值是依然是【对象类型】,可直接编,也可写成函数,建议写成函数。

结论:监视的要是对象里的属性,那么最好写函数式
注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。

准备代码如下

<template><div class="person"><h2>姓名:{{ person.name }}</h2><h2>年龄:{{ person.age }}</h2><h2>爱好:{{ person.hobby.h1 }}、{{ person.hobby.h2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeH1">修改第一个爱好</button><button @click="changeH2">修改第二个爱好</button><button @click="changeHobby">修改整个爱好</button>
</div></template><script lang="ts" setup name="Person11">import {reactive,watch} from 'vue'let person = reactive({name:'馒头',age:22,hobby:{h1:'游泳',h2:'篮球'}})function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeH1(){person.hobby.h1 = '足球'}function changeH2(){person.hobby.h2 = '羽毛球'}function changeHobby(){person.hobby = {h1:'乒乓球',h2:'跳绳'}}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

我们先来运行一下界面
请添加图片描述
如果我们想要监控全部

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

如果我们想要监视某一个属性可以直接(.)属性么。我们来试试看

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

结果显然是不可以的
在这里插入图片描述
那我们如何修改呢,需要加一个getter函数,所谓getter函数就是能返回一个值的函数

watch(()=>{return person.name},(newValue,oldValue)=>{console.log(newValue,oldValue)})

这样修改的监视就可以满足对某属性的监视了


如果我们想要监视对象的话,下面的代码就可以解决,但是当我们点击修改对象整体,确不监视了

   watch(()=>person.hobby,(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)})

这时候我们需要加点东西,也就是我们之前说过的deep配置

   watch(()=>person.hobby,(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})

这样我们就可以全部监视了
在这里插入图片描述
注意:监视响应式对象中的某个属性,且该属性是对象类型的,可以直接写,也能写函数,更推荐写函数

🍋情况五:监视上述的多个数据

写法如下,将想要监视的对象或者属性包裹在[ ]中即可

  watch([()=>person.name,person.hobby],(newValue,oldValue)=>{console.log(newValue,oldValue)},{deep:true})

🍋总结

本节将剩下的监视情况全数介绍了,如果有感兴趣的请参考官方文档watch

请添加图片描述

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

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

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

相关文章

OD(9)之Mermaid序列图(Sequence diagrams)使用详解

OD(8)之Mermaid序列图(Sequence diagrams)使用详解 Author: Once Day Date: 2024年2月21日 漫漫长路才刚刚开始… 全系列文章可参考专栏: Mermiad使用指南_Once_day的博客-CSDN博客 参考文章: 关于 Mermaid | Mermaid 中文网 (nodejs.cn)Mermaid | Diagramming and charti…

C++实现Date类

Date.h #pragma once#include <iostream> using std::cout; using std::endl;class Date { private:int _year 1;int _month 1;int _day 1;public://日期类无需显式定义拷贝构造函数、析构函数、赋值运算符重载//打印void Print();//有参构造函数Date(int year 1, i…

4.4 MySQL存储

目录 1、使用前提 2、使用连接数据库最初步骤 2.1 最初步骤 2.2 connect()方法中参数简单传递 3、创建数据库(创建架构)和创建表 3.1 创建数据库(创建架构) 3.2 创建表 3.2.1 基本创建 3.2.2 创建自增主键 4、Pycharm 可视化连接 MySQL 图形界面 5、插入、更新、查询…

【蓝桥杯】青蛙跳杯子(BFS)

一.题目描述 二.输入描述 输入为 2 行&#xff0c;2 个串&#xff0c;表示初始局面和目标局面。我们约定&#xff0c;输入的串的长度不超过 15。 三.输出描述 输出要求为一个整数&#xff0c;表示至少需要多少步的青蛙跳。 四.问题分析 注意&#xff1a;空杯子只有一个 …

3种SQL语句优化方法,测试人必知必会!

关于SQL语句的优化&#xff0c;本质上就是尽量降低SQL语句的执行时间&#xff0c;对于如何降低SQL语句的执行时间&#xff0c;可以从以下几个方面入手。 一、降低SQL语句执行时的资源消耗 这是我们在数据库性能调优中常用的方法&#xff0c;该方法以分析SQL语句的执行计划为切…

Qt程序设计-报警灯自定义控件实例

本文讲解Qt报警灯自定义控件实例。 实现功能 设置边框和内部颜色。 设置是否闪烁点亮。 添加的报警灯类 #ifndef LIGHT_H #define LIGHT_H#include <QWidget> #include <QDebug> #include <QPainter> #include <QTimer>class Light : public QWid…

Python实用技巧:处理JSON文件写入换行问题

Python实用技巧&#xff1a;处理JSON文件写入换行问题 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程 &#x1f448; 希望得到您的订阅…

linux中将普通用户添加sudo权限

1.登录root权限账号&#xff0c;编辑/etc/sudoers文件 2.找到"root ALL(ALL) ALL"&#xff0c;并在下面添加普通用户 格式&#xff1a;username ALL(ALL) ALL vim /etc/sudoers ## Next comes the main part: which users can run what software …

理解大数据处理过程中的小文件问题

相信很多开发都知道这个问题&#xff0c;看文章&#xff0c;看博客都有了解过。但是如果让你自己讲&#xff0c;能不能从头到尾讲明白原理和对应的解决方案呢&#xff1f; 这个小文件是怎么产生的&#xff1f;就一句话&#xff0c;spark处理完数据输出时&#xff0c;一个分区一…

CMake和VsCode调试的使用

目录 CMake使用 CMake下载 创建系统文件目录 MakeList编写规范 VsCode启动调试 添加配置文件 添加断点&#xff0c;启动调试 CMake使用 CMake下载 输入指令 sudo apt install cmake 安装cmake&#xff0c;使用 cmake -version可查看cmake的版本信息 创建系统文件目…

土耳其商务团一行莅临优积科技考察交流

7月31日土耳其商务代表Emre Arif Parlak等一行三人莅临优积科技考察交流&#xff0c;公司CEO刘其东携团队成员热情接待并深入交流。 商务团首先参观了我司产品生产基地&#xff0c;详细了解了钢结构模块的生产加工工艺流程和质量控制体系。随后参观了我司模块化学校样板房、模块…

Python-语句

一、if语句 格式 if 条件&#xff1a; 条件成立执行的代码 if True:print(条件成立执行的代码) print(这个代码执行吗?)上述代码两个print均执行 if False:print(条件成立执行的代码) print(这个代码执行吗&#xff1f;)只执行第二个print 2.总结 对于未缩进的代码&#x…

Git+py+ipynb Usage

0.default config ssh-keygen -t rsa #之后一路回车,当前目录.ssh/下产生公私钥 cat ~/.ssh/id_rsa.pub #复制公钥到账号 git config --global user.email account_email git config --global user.name account_namebug of ipynb TqdmWarning: IProgress not found. Please …

Springboot日常总结-@RestController和@Controller的区别

RestController和 Controlle是两种不同的控制器实现&#xff0c;它们的主要区别在于如何处理返回的数据和是否支持跳转到视图页面。 Controller 是一个基本的控制器注解&#xff0c;它允许你将一个类标记为一个Spring MVC控制器处理器。使用 Controller 的类中的方法可以直接返…

c++学习记录 string容器—字符串比较

比较方式&#xff1a; 字符串比较是按照字符的ASCII码进行对比 返回 0> 返回 1< 返回 -1 函数原型&#xff1a; int compare(const string& s) const; //与字符串s比较int compare(const char* s) const; //与字符串s比较 #include<iostream> using name…

一文1400字使用Jmeter进行http接口测试【建议收藏】

前言&#xff1a; 本文主要针对http接口进行测试&#xff0c;使用Jmeter工具实现。Jmter工具设计之初是用于做性能测试的&#xff0c;它在实现对各种接口的调用方面已经做的比较成熟&#xff0c;因此&#xff0c;本次直接使用Jmeter工具来完成对Http接口的测试。 一、开发接口…

【JavaSE】集合框架

目录 程序场景分析 Java集合框架包含的内容List接口ArrayListLinkedListList接口的常用方法ArrayList案例背景分析代码示例扩展以下功能代码示例 LinkedList案例背景分析代码示例LinkedList的特殊方法 ArrayList与LinkedList对比 Set接口HashSet 集合的特点常用方法案例背景分析…

[c 语言] 大端,小端;网络序,主机序

在网络编程中&#xff0c;特别是底层网卡驱动开发时&#xff0c;常常遇到字节序问题。字节序指的是多字节数据类型在内存中存放的顺序&#xff0c;高位保存在低地址还是高地址&#xff0c;以此来划分大端还是小端。 1 大端和小端 大端和小端指的是 cpu 的属性&#xff0c;常见…

Vulhub 靶场训练 DC-9解析

一、搭建环境 kali的IP地址是&#xff1a;192.168.200.14 DC-9的IP地址暂时未知 二、信息收集 1、探索同网段下存活的主机 arp-scan -l #2、探索开放的端口 开启端口有&#xff1a;80和22端口 3、目录扫描 访问80 端口显示的主页面 分别点击其他几个页面 可以看到是用户…

SpringBoot源码解读与原理分析(三十四)SpringBoot整合JDBC(三)声明式事务的传播行为控制

文章目录 前言10.5 声明式事务的传播行为控制10.5.1 修改测试代码&#xff08;1&#xff09;新建一个Service类&#xff0c;并引用UserService&#xff08;2&#xff09;修改主启动类 10.5.2 PROPAGATION_REQUIRED10.5.2.1 tm.getTransaction&#xff08;1&#xff09;获取事务…