Vue3_2024_6天【回顾上篇watch常见的前三种场景】另两种待补

第一种情况:监视【ref】定义(基本数据类型)

  • 1.引入watch
  • 2.格式:watch(基本数据类型数据,监视变化的回调函数)

注意点:
2.1.watch里面第一个参数,是数据~~【监视的基本类型变量名】,不需要.value,(前面说过,ref定义的数据,使用都需要.value,当这里使用数据,不是值!)
2.2.watch里面第二个参数,是回调函数,因为setup中没有this,所以这里回调函数使用箭头函数;

  • 3.代码举例:
let num=ref(10);
watch(num(newValue,oldValue)=>{console.log ( '数据变化了',newValue,oldValue);}
)

第二种情况:监视【ref】定义的(对象数据类型)

  • 1.引入watch
  • 2.格式:watch(对象类型数据,监视变化的回调函数,{ 监听配置 例如:deep:true、immediate} )
  • 3 代码举例:
let testObj=ref({a=1,b=2,c=3};
changeObj(){
testObj.value={a=6,b=7,c=9};//监听ref对象,+.value;
}
watch(testObj,(newValue,oldValue)=>{
console.log("对象变化了",newValue,oldValue)
},{deep:true});

注意点:
这里可以看到,监视ref定义的对象,watch里面有三个参数(监视ref定义基本数据类型~~watch只有两个参数)

3.1.第一个参数,仍旧是数据,
3.2 第二个参数,仍旧是检测数据变化的回调,
3.3 第三个参数,属于监听对象的配置,
配置1:deep :true (深度监听对象,“ Vue会递归地将对象的所有属性都转换为响应式对象,从而实现对对象内部属性的深度监听 ”)
配置2:immediate 立即执行,说明:watch一般初始页面时,不会触发watch,只有当watch中属性变化后,才会执行watch对应监听;若配置immediate,则页面初始化时按生命周期执行顺序,一直到watch时,发现配置了immediate立即执行(命令),则会自动给你执行这个监视器!
这里列举两个常用配置,当然还有其余配置…

第三种情况:监视【reactive】定义的(对象数据类型)

  • 1.引入watch
  • 2.格式:watch(对象类型数据,监视变化的回调函数)
  • 3.代码举例
let testObj=reactive({a=1,b=2,c=3};
changeObj(){
Object.assign(testObj,{a=9,b=8,c=7});//reactive定义对象赋值,必须使用Object.assign才继续保持对象赋值后,仍旧响应式效果
}
watch(testObj,(newValue,oldValue)=>{
console.log("对象变化了",newValue,oldValue)
});

注意点:
这里可以看到,监视reactive定义对象类型~~watch只有两个参数(监视ref定义的对象,watch里面有三个参数),因为reactive的监听watch里面只有两个参数,并且自带deep深度监听效果。

3.1.第一个参数,仍旧是数据,
3.2 第二个参数,仍旧是检测数据变化的回调,

补充

监听ref定义对象、监听reactive定义的对象,【前者】对象的赋值(且不影响响应式效果),直接采用:右边对象赋值给左边对象,【后者】对象的赋值,无法直接左边新对象赋值右边,这就是它局限性,需要使用Object.assign(对象A,对象B)方法,将右边对象B的值,copy过去给到对象A相同key上。最后如图:
在这里插入图片描述

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

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

相关文章

[Buuctf] [MRCTF2020] Xor

运行 1.查壳 32位exe文件,没有壳 2.用32位IDA打开 找到main函数,F5查看伪代码,但是这里会弹出一个窗口 函数分析失败!! 这里我在看别人的题解时发现一种玄学方式解决了这个问题 窗口里面弹出了一个地址401095&…

LVS+Keepalived 高可用负载均衡集群

一. 高可用集群的相关知识 1.1 高可用(HA)集群和普通集群的比较 ① 普通集群 普通的群集的部署是通过一台度器控制调配多台节点服务器进行业务请求的处理,但是仅仅是一台调度器,就会存在极大的单点故障风险,当该调度…

蓝桥杯备赛之二分专题

常用的算法二分模板 1. 在数组a[]中找大于等于x的第一个数的下标 //int ans lower_bound(a, a n, x) - a //相当于下方 int l 0, r n - 1; while(l < r) {int mid l r >> 1;if(a[mid] > x) r mid;else l mid 1; } cout << r;2. 在数组a[]中找大于…

详解Rust的连贯性和孤儿规则

最近学习Rust时候看到两个术语&#xff1a;连贯性(Coherence)和孤儿规则(Orphan rules)&#xff0c;书上解释的不是很清楚&#xff0c;又没有给出具体的代码示例&#xff0c;让人很难理解。我在网上搜了好久&#xff0c;最后又查了Rust语言规范&#xff0c;算是搞明白了这两个概…

qml中toolbox控件、ComboBox控件、PlainText实现及美化

一. 内容简介 qml中toolbox控件、ComboBox控件、PlainText实现及美化 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 2.3pytorch 安装pytorch(http://t.csdnimg.cn/GVP23) 2.4QT 5.14.1 新版QT6.4,&#xff0c;6.5在线安装经常失败&#xff0c;而5.9版本…

[蓝桥杯 2019 省 B] 等差数列

题目链接 [蓝桥杯 2019 省 B] 等差数列 题目描述 数学老师给小明出了一道等差数列求和的题目。但是粗心的小明忘记了一部分的数列&#xff0c;只记得其中 N N N 个整数。 现在给出这 N N N 个整数&#xff0c;小明想知道包含这 N N N 个整数的最短的等差数列有几项&#x…

亚马逊运营要使用什么海外代理IP?

代理IP作为网络活动的有力工具&#xff0c;同时也是跨境电商的必备神器。亚马逊作为跨境电商的头部平台&#xff0c;吸引了大量的跨境电商玩家入驻&#xff0c;想要做好亚马逊&#xff0c;养号、测评都需要代理IP的帮助。那么应该使用什么代理IP呢&#xff1f;如何使用&#xf…

复杂系统未来演化很难准确预测

复杂系统的未来演化很难准确预测。这是由于复杂系统包含大量相互作用的组成部分&#xff0c;其行为和发展受到多种因素的影响&#xff0c;包括内部动力、外部环境变化以及意外事件等。此外&#xff0c;复杂系统通常呈现非线性关系&#xff0c;即系统的变化可能以不可预测的方式…

JS-02-javaScript快速入门

一、javaScript代码的编写位置 JavaScript代码可以直接嵌在网页的任何地方&#xff0c;但是一般&#xff0c;我们用如下编写方式。 1-1、直接写到HTML文件中 通常我们都把JavaScript代码放到<head>中&#xff0c;由<script>...</script>包含的代码就是Java…

【深度学习】1. 深度学习概述

感知器模型 人脑中的神经元:一个神经元通常具有多个树突&#xff0c;主要用来接受传入信息;而轴突只有一条&#xff0c;轴突尾端有许多轴突末梢可以给其他多个神经元传递信息。轴突末梢跟其他神经元的树突产生连接&#xff0c;从而传递信号。 而在计算机的神经网络中&#xff…

985硕的4家大厂实习与校招经历专题分享(part2)

我的个人经历&#xff1a; 985硕士24届毕业生&#xff0c;实验室方向:CV深度学习 就业&#xff1a;工程-java后端 关注大模型相关技术发展 校招offer: 阿里巴巴 字节跳动 等10 研究生期间独立发了一篇二区SCI 实习经历:字节 阿里 京东 B站 &#xff08;只看大厂&#xff0c;面试…

【leetcode刷刷】455.分发饼干 、376. 摆动序列 、53. 最大子序和

455.分发饼干 376. 摆动序列 其实贪心的想法&#xff0c;做过一次的话就不会很难想了。但这道题需要考虑的特殊情况比较复杂&#xff0c;包括平台什么的。最左边和最右边也需要考虑&#xff1a;最左边&#xff0c;添加一个平台。 可以假设&#xff0c;数组最前面还有一个数字…

Mysql - is marked as crashed and should be repaired

概述 上周发生了一个Mysql报错的问题&#xff0c;今天有时间整理一下产生的原因和来龙去脉&#xff0c;Mysql的版本是5.5,发生错误的表存储引擎都是MyISAM,产生的报错信息是Table xxxxxx is marked as crashed and should be repaired。 定位问题 产生的后果是Nginx服务没有…

Unity骚操作: Exception堆栈追踪

Exception堆栈追踪 上代码 try{SaveData saveData SaveLoadManager.Load(migrate: false);if (saveData ! null){Version v new Version(saveData.gameVersion);Version v2 new Version(Cheats.version);if (v < v2){SaveLoadManager.MigrationBackupLocalSave();SaveL…

C++入门知识点

文章目录 一、C的域作用限定符1.1全局域1.2限定域作用范围 二、C的命名空间域2.1单个命名空间的变量访问和单个不同命名空间的相同变量名的访问2.2命名空间的嵌套调用 三、C的流插入、流提取操作符四、C的缺省参数4.1函数的全缺省4.1函数的部分缺省 五、C的函数重载5.1函数重载…

【操作系统学习笔记】文件管理1.5

【操作系统学习笔记】文件管理1.5 参考书籍: 王道考研 视频地址: Bilibili 逻辑结构 VS 物理结构 逻辑结构: 从用户角度看&#xff0c;由创建文件的用户自己设计的 无结构文件 // 在用户看来是一篇连续的空间 FILE *fp fopen("test.txt", "r"); if (fp …

【算法集训】基础算法:模拟

一、基本理解 顾名思义&#xff0c;就是题目要求做什么&#xff0c;代码中就跟着做就可以。 二、题目练习 1252. 奇数值单元格的数目 根据题目要求列出如下代码。需要注意填充列和行的时候注意下标。 int oddCells(int m, int n, int** indices, int indicesSize, int* in…

this关键字

this关键字 this 是 Java 的一个关键字&#xff0c;表示某个对象 this 可以出现在构造方法、实例方法中&#xff0c;但不可以出现在类方法中 出现在构造方法中&#xff0c;代表使用该构造方法创建的对象出现在实例方法中&#xff0c;代表正在调用该方法的当前对象 一、构造…

Docker-容器网络互联

目录 1 前言 2 常用指令 3 实现容器互联 3.1 自定义网络 3.2 让容器连接创建的网络 3.2.1 容器创建后连接网络 3.2.2 容器创建时连接网络 3.3 尝试使用容器名访问(测试) 1 前言 在默认情况下&#xff0c;docker中的容器都是连接到一个虚拟的网桥上的&#xff0c;这为独…

关于yolov8的DFL模块(pytorch以及tensorrt)

先看代码 class DFL(nn.Module):"""Integral module of Distribution Focal Loss (DFL).Proposed in Generalized Focal Loss https://ieeexplore.ieee.org/document/9792391"""def __init__(self, c116):"""Initialize a convo…