Vue3_2024_7天【回顾上篇watch常见的后两种场景】

随笔:这年头工作不好找咯,大家有学历提升的赶快了,还有外出人多注意身体,没错我在深圳这边阳了,真的绝啊,最尴尬的还给朋友传染了!!!

之前三种的监听情况,监听的是整个对象变化,下面
第四种情况: ref和reactive都能定义响应式对象,若监听其对象内部单个属性变化;
1.1(单个-基本类型-监听): 对ref 和reactive定义的响应式对象中【某个】属性监听,且该属性为【基本数据类型】,需要写成函数式;

例如:watch(参数1:箭头函数,参数2:监听变化箭头函数)
在这里插入图片描述

1.2(单个-对象数据类型-监听): 对ref 和reactive定义的响应式对象中【某个】属性监听,且该属性为【对象数据类型】,需要写成函数式;

例如:watch(参数1:箭头函数,参数2:监听变化箭头函数,参数3:监听配置对象{deep:true})
在这里插入图片描述

1.3 注

以上两种监听里面的参数一:就是getting函数(一个函数,一个返回值)

1.4 附代码
<template><div style="background-color: #eeeeee;"><div>姓名:{{person.name}}</div><div>喜欢的书籍:{{person.likeBook.book1}}{{person.likeBook.book2}}</div></div><div style="display:flex;"><button @click="updateName()">修改-姓名</button><button @click="updateLikeBook()">修改-喜欢的书籍</button></div>
</template>
<script name="Greg_04">
</script><script setup lang="ts">
import {reactive,watch} from 'vue';
let person=reactive({name:'钟家明',likeBook:{book1:'《红楼梦》',book2:'《三国演义》'}});//修改
function updateName(){person.name='温樟丽'
}
function updateLikeBook(){person.likeBook={book1:'《泰戈尔飞鸟集》',book2:'《老人与海》'};
}//第一:监听person里面单个属性变化
//1.单个属性变化(基本数据类型)
watch(()=>{return person.name;
},(newVal,oldVal)=>{console.log("person对象内,name基本类型~属性变化了...",newVal,oldVal);
})//2.单个属性变化(对象数据类型)
watch(()=>{return person.likeBook;
},(newVal,oldVal)=>{console.log("person对象内,likeBook对象~属性变化了...",newVal,oldVal);
},{deep:true})</script><style></style>
第五种情况:基于第四种情况,监视多个数据

在这里插入图片描述

结语:第一种情况和第四种情况,在开发比较常见!

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

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

相关文章

LabVIEW太赫兹波扫描成像系统

LabVIEW太赫兹波扫描成像系统 随着科技的不断发展&#xff0c;太赫兹波成像技术因其非电离性、高穿透性和高分辨率等特点&#xff0c;在生物医学、材料质量无损检测以及公共安全等领域得到了广泛的应用。然而&#xff0c;在实际操作中&#xff0c;封闭性较高的信号采集软件限制…

dm8数据迁移工具DTS

dm8数据迁移工具DTS DTS工具介绍 DM数据迁移工具提供了主流大型数据库迁移到DM、DM到DM、文件迁移到DM以及DM迁移到文件的功能。DM数据迁移工具采用向导方式引导用户通过简单的步骤完成需要的操作。 DM数据迁移工具支持&#xff1a; ◆ 主流大型数据库Oracle、SQLServer、MyS…

DC9 Debian和sql注入

信息收集 sudo arp-scan -l 列出局域网主机 arp-scan向局域网中所有可能的ip地址发出arp请求包&#xff0c;如果得到arp回应&#xff0c;就证明局域网中某台主机使用了该ip dc9的ip &#xff1a; 192.168.146.133 访问网页 cms为Debian 端口扫描 22端口是filtered 隐藏目…

详细分析Python爬虫中的xpath(附Demo)

目录 前言1. 基本知识2. 常用API3. 简易Demo 前言 关于爬虫的基本知识推荐阅读&#xff1a;Python爬虫从入门到应用&#xff08;超全讲解&#xff09; 该知识点需要提前安装相关依赖&#xff1a;pip install lxml 1. 基本知识 XPath&#xff08;XML Path Language&#xf…

GIt 删除某个特定commit

目的 多次commit&#xff0c;想删掉中间的一个/一些commit 操作方法 一句话说明&#xff1a;利用rebase命令的d表示移除commit的功能&#xff0c;来移除特定的commit # 压缩这3次commit,head~3表示从最近1次commit开始&#xff0c;前3个commit git rebase -i head~3rebase…

机器学习每周挑战——信用卡申请用户数据分析

数据集的截图 # 字段 说明 # Ind_ID 客户ID # Gender 性别信息 # Car_owner 是否有车 # Propert_owner 是否有房产 # Children 子女数量 # Annual_income 年收入 # Type_Income 收入类型 # Education 教育程度 # Marital_status 婚姻状况 # Housing_type 居住…

使用GPT需要注意的事项

GPT出来之后&#xff0c;基本就告别浏览器搜索问题答案了。将问题原封不动的copy给GPT基本可以得到解答。 但是这个也有弊端&#xff0c;那就是太依赖GPT了。 1&#xff0c;使用GPT需要更强的专业知识&#xff1a;除了能问对问题&#xff0c;还要具备识别GPT&q…

拦截器抛出异常无法被全局异常处理器捕获问题

文章目录 基本说明问题描述问题原因解决方法前端执行的所有请求都通过Controller&#xff0c;而不是直接访问html定义一个/error路径的方法 总结 基本说明 我的前后端项目是放在一起的&#xff0c;前后端都是由springMVC进行控制&#xff0c;但是现在我在拦截器的preHandle方法…

蓝桥杯单元测试专项练习Java版(单元测试4)(修正版)

关于简单循环覆盖法可以看看这里我的上一个文章http://t.csdnimg.cn/k92fn\ 题目4链接:单元测试专项练习&#xff08;JavaPython&#xff09; - 第四题单元测试题目&#xff08;Java&#xff09; - 蓝桥云课 (lanqiao.cn) 目录 题目描述 源代码功能 原题: Datas.java Good…

自动驾驶_交通标志识别:各目标检测算法评测

自动驾驶|交通标志识别&#xff1a;各目标检测算法评测 论文题目&#xff1a;Evaluation of Deep Neural Networks for traffic sign detection systems 开源代码&#xff1a;https://github.com/aarcosg/traffic-sign-detection 附赠自动驾驶学习资料和量产经验&#xff1a;…

计算机视觉——基于傅里叶幅度谱文档倾斜度检测与校正

概述 在计算机视觉领域&#xff0c;处理文档数据时&#xff0c;OCR算法的性能往往会受到文档的倾斜度影响。如果文档在输入到模型之前没有经过恰当的校正&#xff0c;模型就无法期待模型能够提供准确的预测结果&#xff0c;或者模型预测的精度会降低。例如&#xff0c;在信息提…

助力蓝桥杯单片机省一————模块之超声波

距离蓝桥杯单片机省赛还有7天 本次介绍的模块是超声波模块&#xff0c;将使用定时器1和PCA进行距离的测量。如果对PCA还未了解的&#xff0c;可以打开官方给的芯片数据手册&#xff0c;自行查看。 一、超声波测量原理 二、产生8个40KHz的超声波 void Init_wave() {unsigned …

7 个 iMessage 恢复应用程序/软件可轻松恢复文本

由于误操作、iOS 升级中断、越狱失败、设备损坏等原因&#xff0c;您可能会丢失 iPhone/iPad 上的 iMessages。意外删除很大程度上增加了这种可能性。更糟糕的是&#xff0c;这种情况经常发生在 iDevice 缺乏备份的情况下。 &#xff08;iPhone消息消失还占用空间&#xff1f;&…

实际项目中如何使用Git做分支管理

前言 Git是一种强大的分布式版本控制系统&#xff0c;在实际项目开发中使用Git进行分支管理是非常常见的做法&#xff0c;因为它可以帮助团队高效的协作和管理项目的不同版本&#xff0c;今天我们来讲讲在实际项目中最常用的Git分支管理策略Git Flow。 常见的Git分支管理策略…

【开源语音项目OpenVoice](一)——实操演示

目录 一、前菜 1、Python选择 2、pip源切换 3、ffmpeg配置问题 4、VSCode添加Jupyter扩展 二、配置虚拟环境 1、下载源码 方法一 直接下载源码压缩包 方法二 使用git 1&#xff09;git加入鼠标右键 2&#xff09;git clone源码 2、VSCode出场 1&#xff09;创建pyth…

第二十五周代码(蓝桥杯查缺补漏)

2024/03/31 周日 填充 题目链接 【参考代码】 想用暴力&#xff0c;没过 //枚举&#xff0c;未出结果QAQ #include <bits/stdc.h> using namespace std; string s00 "00"; string s11 "11"; int ans 0; //m个问号&#xff0c;子串有2^m…

1-32 异常

一 什么是异常? 1.含义:异与正常状态的显示,控制台显示的结果和预期的结果不一致 2.例如: int[] nums new int[2]; System.out.println(nums[2]); --抛出异常 二 异常分类 1.检测性异常:又称 非运行时异常,一般编写代码过程中编辑器直接报错 2.非检测性异常(常用):又称为…

牛客 2024春招冲刺题单 ONT98 牛牛猜节点【中等 斐波那契数列 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/6a3dfb5be4544381908529dc678ca6dd 思路 斐波那契数列参考答案Java import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规…

让chatGPT控制物理设备

作为自动控制行业的工程师&#xff0c;我们也许最关心的是如何使chatGPT 控制物理设备。我发现许多人仍然停留在传统程序设计的思维阶段&#xff0c;比如让大模型编写一段PLC 代码&#xff0c;或者是生成一些信息模型。 其实大模型具备判断与思考的能力&#xff0c;AI …

ARM v8 Cortex R52内核 02 程序模型 Programmers Model

ARM v8 Cortex R52内核 02 程序模型 Programmers Model 2.1 关于程序模型 Cortex-R52处理器实现了Armv8-R架构。这包括&#xff1a; 所有的异常级别&#xff0c;EL0-EL2。 每个异常级别下的AArch32执行状态。 T32和A32指令集&#xff0c;其中包括&#xff1a; 浮点运算。 …