【学习笔记】vue3的watch

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

课程 P152节 笔记:
情况一:监视ref所定义的一个响应式数据
情况二:监视ref所定义的多个响应式数据
这两种情况比较简单,正常写就ok:

在这里插入图片描述

情况三:监视reactive所定义的一个响应式数据
这种情况下,问题来了,此时无法正确获取oldValue的值,打印如图:

在这里插入图片描述
在这里插入图片描述
此时如果一定要获取oldValue的值,可以将需要获取oldValue的某个属性值单独使用ref定义。

第二个坑是:强制开启了深度监视,也就是配置deep:false也不起作用

在这里插入图片描述

情况四:监视reactive所定义的一个响应式数据种的某个属性
这种情况需要将所要监视的属性写到一个函数的返回值里:

在这里插入图片描述
在这里插入图片描述

情况五:监视reactive所定义的一个响应式数据种的某些属性
在这里插入图片描述
在这里插入图片描述

特殊情况:监视reactive所定义的一个响应式数据的一个对象属性
此时由于监视的是reactive所定义的响应式对象种的某个属性,所以deep配置有效

在这里插入图片描述

特殊情况,如果不加{deep:true},监视不奏效:

在这里插入图片描述

总结

  • 如果监视的是一个reactive定义的响应式数据(情况三),则会出现两个小问题:1、无法正确获取到oldValue;2、强制开启了深度监视且无法关闭,即配置{deep:false}无效

  • 如果监视的是一个reactive定义的响应式数据中的某一个对象属性(特殊情况),则需要配置{deep:true}监视才会生效;此时仍然无法正确获取到oldValue

  • 貌似是:只要监视的值是对象,就无法获取到oldValue

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Qt|QPushButton控件讲解

前提 按钮分为了四种状态:常态、聚焦、按下、禁用 前一段时间更新了MFC框架下CButton的自绘。因为MFC框架下的按钮限制性很高,所以只能由自绘实现各种风格,但是QT框架完美的解决了这个问题,我们只需要了解如何调用,就…

MySQL-窗口函数

介绍: MSQL8.0新增窗口函数商口函数又被称为开窗函数,与Oracle窗口函数类似,属于MysaL的一大特点 非聚合窗口函数是相对于聚函数来说的。聚合函数是对一组数据计算后返回单个值(即分组),非聚合函数一次只会处理一行数据。窗口聚…

buffer/cache导致内存不足的案例分析

目录 一、项目简介 二、问题分析 三、问题处理 什么是buffer/cache? buffer/cache 需要注意的一些特点 如何进行手动 buffer/cache 回收 手动 buffer/cache 回收可能出现的问题 如何让系统自动回收buffer/cache vm.min_free_kbytes 四、参考文献 一、项目…

亚信安慧AntDB:AntDB-M元数据锁(八)

5.6 死锁检测 图4-死锁等待 每个线程在进入锁等待前,都会先进行死锁检测,避免陷入死锁等待。在检测前,会先将自己获取到的unobtrusive锁进行物化,即将锁放入锁的授予列表中,以便死锁检测能区分锁的归属线程。然后设置…

Proto文件如何生成JavaProto对象?

首先安装好Protocol Buffer的编译器 Protocol Buffer: version:2.6.1 link: 链接直达 根据电脑环境进行下载,Widnwos 32/64位就选择win32是没问题的,楼主亲测 1.proto文件编写 Person.proto public class Person {String name;int id;String email…

【高阶数据结构】AVL树

文章目录 前言1. 什么是二叉搜索树2. 什么是AVL树3. AVL树节点的定义4. AVL树的插入4.1 新节点插入较高右子树的右侧4.2 新节点插入较高左子树的左侧4.3 新节点插入较高左子树的右侧4.4 新节点插入较高右子树的左侧插入操作完整代码插入操作总结 AVL树的验证AVL树的删除AVL树性…

git push后,如何撤销git log上的错误注释

修改了本地的代码,执行了下面的操作,提交之后,怎么样修改 git add ********(文件名)//git add 添加修改文件名之后 git commit //git commit 在当前分支提交,编写提交注释 git push //git push 提交修…

虹科干货 | 如何使用nProbe Cento构建100 Gbit NetFlow 传感器

本文是一份全面的指南,解释了如何使用nProbe Cento构建一个高效的100 Gbit NetFlow传感器。旨在帮助大家充分利用NetFlow技术,以监控和分析高速网络流量。 当需要监控分布式网络,了解流经上行链路或关键网段的网络流量时,NetFlow…

ES实战回顾

1、你用的集群节点情况? 一个ES集群,18个节点,其中3个主节点,15个数据节点,500G左右的索引数据量,没有单独的协调节点,它的每个节点都可以充当协调功能; 2、你们常用的索引有哪些&a…

【游戏服务器部署】幻兽帕鲁服务器一键部署保姆级教程,游戏私服还是自己搭建的香

在帕鲁的世界,你可以选择与神奇的生物「帕鲁」一同享受悠闲的生活,也可以投身于与偷猎者进行生死搏斗的冒险。帕鲁可以进行战斗、繁殖、协助你做农活,也可以为你在工厂工作。你也可以将它们进行售卖,或肢解后食用。—幻兽帕鲁 想要…

AI工具【OCR 01】Java可使用的OCR工具Tess4J使用举例(身份证信息识别核心代码及信息提前方法分享)

Java可使用的OCR工具Tess4J使用举例 1.简介1.1 简单介绍1.2 官方说明 2.使用举例2.1 依赖及语言数据包2.2 核心代码2.3 识别身份证信息2.3.1 核心代码2.3.2 截取指定字符2.3.3 去掉字符串里的非中文字符2.3.4 提取出生日期(待优化)2.3.5 实测 3.总结 1.简…

RocketMq5源码搭建

最近公司使用到了RocketMQ,所以打算研究一下RocketMQ 准备自己动手搭建一下RocketMq源码 前提 需要搭建jdk环境,jdk版本需要高于1.8 首先 从github 拉源码 源码地址:rocketMq源码传送门 启动namesrv 启动之前需要配置一下ROCKERMQ_HOME 配置如下&a…

力扣hot100 括号生成 递归回溯 超简洁版

Problem: 22. 括号生成 Code 使用 static 会被复用 class Solution {List<String> ans new ArrayList<>();public List<String> generateParenthesis(int n){dfs(n, n, "");return ans;}/*** param l 左括号待补个数* param r 右括号待补个数*…

基于SpringBoot+Vue的甘肃非物质文化网站(V2.0),附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

如何在Shopee泰国站点进行有效的选品

在Shopee泰国站点进行选品时&#xff0c;卖家可以采取一些策略来提高产品的市场竞争力和销售业绩。以下是一些可以遵循的策略&#xff1a; 先给大家推荐一款shopee知虾数据运营工具知虾免费体验地址&#xff08;复制浏览器打开&#xff09;&#xff1a;D。dDqbt。Com/JU5o知虾…

财务数据可视化大屏:企业决策的智慧之眼

在大数据时代&#xff0c;财务数据的管理与分析对于企业的决策和发展至关重要。然而&#xff0c;面对海量的数据&#xff0c;如何快速、准确地获取有价值的信息&#xff0c;一直是企业面临的挑战。这时&#xff0c;财务数据可视化大屏的出现&#xff0c;为企业提供了一个全新的…

Pandas--数据结构 - DataFrame(4)

DataFrame 是一个表格型的数据结构&#xff0c;它含有一组有序的列&#xff0c;每列可以是不同的值类型&#xff08;数值、字符串、布尔型值&#xff09;。DataFrame 既有行索引也有列索引&#xff0c;它可以被看做由 Series 组成的字典&#xff08;共同用一个索引&#xff09;…

1_Matlab基本操作

文章目录 工作环境操作界面运行命令窗口使用历史窗口当前目录浏览器工作空间浏览器帮助系统 工作环境 操作界面 命令窗口&#xff1a;用户进行操作的主要窗口。可以输入各种MATLAB的命令。函数和表达式。同时操作的运算结构也会在该窗口出现。历史命令窗口&#xff1a;记录用户…

【vue】vue.config.js里面获取本机ip:

文章目录 一、效果&#xff1a;二、实现&#xff1a; 一、效果&#xff1a; 二、实现&#xff1a; const os require(os);function getLocalIpAddress() {const interfaces os.networkInterfaces();for (let key in interfaces) {const iface interfaces[key];for (let i …

直播观看人次破30W | 极新「2024未来直播电商科技峰会」圆满落幕

“共话直播电商&#xff06;消费科技行业破局之道” 文&#xff5c;德江&凯丰 编辑 | 云舒 出品&#xff5c;极新 1月27日&#xff0c;由极新携手北京电子商务协会联合举办的「2024未来直播电商科技峰会」圆满落幕&#xff01;在峰会上&#xff0c;共进行了10 场演讲 &a…