Vue中watch监听属性新旧值相同问题解决方案
侦听器 _watch:
作用:可以侦听data和computed中数据的变化.
语法
watch: { "被侦听的属性名" (newVal, oldVal){ } }
监听简单数据类型时可以直接使用,而监听复杂数据类型时,例如当我们只需要监听data或者computed中对象的某个属性时,可以使用字符串的形式进行监听.
//举例:
watch: {
//字符串形式 表示监听item对象下的good_count属性
'item.goods_count'(newval) {
if (newval <= 0) {
this.item.goods_count=1
}
}}
在watch中,如果对对象进行监听,只有对象obj被重新赋值时,watch才会被监听到,这个时候无法对obj里面的属性的变化进行监听,我们也可以给watch对象加上深度监听属性.
handler(newval, oldval) {console.log("完整写法,监听复杂数据类型", newval);},deep: true, //表示开启深度监听immediate: true, //立即监听,在页面初始化时,会监听一次}
而监听复杂数据类型,当复杂数据类型被改变之后,newval的值改变,由于newval和oldval都指向同一个对象,导致oldval也会随之改变,打印出来则没有了old和new之分.
解决方法:在初始化的时候,深克隆一个oldval.
也有看其他人写的文章解决方案,都大差不差,都是使用一个计算属性加上深拷贝,不知道是自己理解能力有问题还是说习惯通俗的表达,看别人的回答时总感觉很拗口.于是自己总结了一下.
在我看来,解决此问题的关键在于:我们此时遇到的问题就是新值与旧值指向同一个地址的问题.而深拷贝的特点就是新开辟一个地址储存需要拷贝对象的所有属性.然后指向这个新地址. 故 JSON.parse(JSON.stringify()能完美解决其中的问题.然后与计算属性合并达到监听的属性一旦变化,自动新开辟一个地址,储存新值.而新值与旧值指向的地址不同,则解决了新值与旧值相同的问题.
<div id="app"><input type="text" v-model="lzy.age" /></div>
</template><script>
export default {name: "App",watch: {lzy2: {handler(newvalue, oldvalue) {console.log("新值");console.log(newvalue);console.log("旧值");console.log(oldvalue);console.log(oldvalue===this.lzy);},deep: true,},},data() {return {lzy: {gender: "man",age: 21,},};},computed: {lzy2(){return JSON.parse(JSON.stringify(this.lzy))// 因为计算属性一开始就执行了一次,相当于在一开始就深拷贝拿到了oldvalue,改变之后又再一次深拷贝,每一次深拷贝生成的对象都是指向不同的地址,所以oldvalue和newvalue是两个不同的地址.},},
};
</script><style scoped>
</style>相关文章:
Vue中watch监听属性新旧值相同问题解决方案
侦听器 _watch: 作用:可以侦听data和computed中数据的变化. 语法 watch: { "被侦听的属性名" (newVal, oldVal){ } } 监听简单数据类型时可以直接使用,而监听复杂数据类型时,例如当我们只需要监听data或者computed中对象的某个属性时,可以使用字符串的形式进行监听…...
awk案例练习
目录 一、awk练习 1.1筛选ip地址 1.2字段去重 1.3次数统计 1.4统计TCP连接状态 1.5处理字段缺失的数据 1.6筛选给定时间范围内的日志 一、awk练习 1.1筛选ip地址 ifconfig命令查看IP 利用awk进行筛选 ifconfig | awk BEGIN{RS""}NR2{print $6} RS指定输入记…...
Debian 12.1 正式发布
导读Debian 12.1 现已发布,这是对稳定发行版 Debian 12(代号 Bookworm )的首次更新。本次发布主要增加了安全问题的修正,并对严重问题进行了一些调整。 一些更新内容包括: 妥善处理系统用户的创建;修复 eq…...
neo4j清空数据库
清空所有Person、 Movie节点及其所有关系 MATCH (a:Person), (m:Movie) OPTIONAL MATCH (a)-[r1]-(), (m)-[r2]-() DELETE a,r1,m,r2 查询任意数据 MATCH (n) RETURN n 如果没有, 就说明已经删除成功了 这段代码是用Cypher查询语言编写的,用于清空…...
SpringBoot整合Mybatis-Plus
文章目录 前言一、Mybatis-Plus简介二、框架结构三、SpringBoot整合Mybatis-Plus1.依赖2.配置文件设置 四、前期准备4.1数据库信息4.2dao类4.3pojo类 五、常用注解5.1 TableName(value "")5.2 TableId(value"",type IdType.XXX)5.3 TableField("&qu…...
在langchain中使用自定义example selector
在langchain中使用自定义example selector 简介 在之前的文章中,我们提到了可以在跟大模型交互的时候,给大模型提供一些具体的例子内容,方便大模型从这些内容中获取想要的答案。这种方便的机制在langchain中叫做FewShotPromptTemplate。 如…...
pytest常用执行参数详解
1. 查看pytest所有可用参数 我们可以通过pytest -h来查看所有可用参数。 从图中可以看出,pytest的参数有很多,下面是归纳一些常用的参数: -s:输出调试信息,包括print打印的信息。 -v:显示更详细的信息。 …...
本地项目如何连接git远程仓库
在本地新建项目后,如何连接git远程仓库呢?步骤如下: 第一步, 首先我们在git上新建仓库,设置模板可勾选Readme文件。(readme文件的创建是为了介绍所写代码的一些详细信息,为了之后更好的维护。)…...
力扣 494. 目标和
题目来源:https://leetcode.cn/problems/target-sum/description/ C题解(来源代码随想录):将该问题转为01背包问题。 假设加法的总和为x,那么减法对应的总和就是sum - x。所以我们要求的是 x - (sum - x) target。x …...
Maven-搭建私有仓库
使用NEXUS REPOSITORY MANAGER 3在Windows上搭建私有仓库。 NEXUS REPOSITORY MANAGER 3 是一个仓库管理系统。 下载NEXUS3 官网上是无法下载的,所以网上搜nexus-3.18.1-01-win64就能搜到,下载即可。 安装NEXUS3 下载nexus-3.18.0-01-win64.zip至相应目录下(路径不要有中文)。 …...
PostgreSql 参数配置
一、访问控制参数配置 https://xiaosonggong.blog.csdn.net/article/details/124264877 二、数据库参数配置 2.1 概述 PostgreSQL 的参数配置参数是在 postgresql.conf 文件中集中管理的,类似于 Oracle 的 pfile 文件,除此之外,PostgreSQL…...
【BMC】OpenBMC开发基础2:修改原有程序
修改原有程序 通常情况下我们会需要修改OpenBMC原有的程序来适配我们的项目,本节将介绍一般的流程。 为此首先我们需要了解devtool这个工具,注意它不是前端开发用的那个devtool,而是由OE(或者Yocto?)提供…...
2012年数学建模竞赛脑卒中发病环境因素分析及干预日期数据处理代码
因四个表格日期数据处理有些复杂,故作此代码一次性处理四组数据: import datetime import pandas as pddef check(string, df, i, num, error_list):if is_valid(pd.to_datetime(string, errorscoerce, format%Y/%m/%d), error_list, i):df.iloc[i, nu…...
Merge和Rebase的区别
Merge 和 Rebase 是 Git 中常用的两种分支整合方式,它们具有不同的工作原理和效果: Merge(合并) 合并是将两个或多个分支的提交历史合并为一个新的提交。在合并时,Git 会创建一个新的合并提交,将两个分支…...
[RTKLIB]模糊度固定相关问题(二)
文章目录 一、固定模糊度的前置工作1. 做好固定模糊度的准备2. 建立双差模糊度3. 问题与总结 版权声明:本文为原创文章,版权归 Winston Qu 所有,转载请注明出处。 在上一篇文章中,介绍了RTKLIB中manage_amb_LAMBDA()函数ÿ…...
QtAV for ubuntu16.04
下载ubuntu https://releases.ubuntu.com/16.04/ubuntu-16.04.7-desktop-amd64.iso 下载ffmpeg https://ffmpeg.org/download.html 下载QtAV https://github.com/wang-bin/QtAV/releases 更新 sudo apt update 安装库 sudo apt-get install libglu1-mesa-dev freeglut3-dev…...
MFC 文件读写包括字符串的结构体
试过CString char* 写入的都是地址 struct Param{int ID;int index;char val[128]; };vector<Param>ans; UINT count 17; ans.resize(count); FILE* fp; fopen_s(&fp,_T("my.txt"),_T("rb")); if(count ! fread(&ans[0],sizeof(Param),cou…...
在家构建您的迷你聊天Chat gpt
推荐:使用 NSDT场景编辑器 助你快速搭建可编辑的3D应用场景 什么是指令遵循模型? 语言模型是机器学习模型,可以根据句子的前一个单词预测单词概率。如果我们向模型请求下一个单词,并将其递减地反馈给模型以请求更多单词ÿ…...
pytest自动化测试框架之断言
前言 断言是完整的测试用例中不可或缺的因素,用例只有加入断言,将实际结果与预期结果进行比对,才能判断它的通过与否。 unittest 框架提供了其特有的断言方式,如:assertEqual、assertTrue、assertIn等,py…...
C++模板的用法
目录 模板的概念 函数模板(Function Templates) 基本用法 函数模板的实例化 匹配原则 类模板(Class Templates) 模板的概念 C中的模板(Templates)实际上是一种泛型编程(Generic Programm…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践
6月5日,2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席,并作《智能体在安全领域的应用实践》主题演讲,分享了在智能体在安全领域的突破性实践。他指出,百度通过将安全能力…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
【Oracle】分区表
个人主页:Guiat 归属专栏:Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
python执行测试用例,allure报乱码且未成功生成报告
allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
mac:大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何,是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试,是可以跑通文章里面的代码。训练速度也是很快的。 注意…...
微服务通信安全:深入解析mTLS的原理与实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言:微服务时代的通信安全挑战 随着云原生和微服务架构的普及,服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...
