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…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
业务系统对接大模型的基础方案:架构设计与关键步骤
业务系统对接大模型:架构设计与关键步骤 在当今数字化转型的浪潮中,大语言模型(LLM)已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中,不仅可以优化用户体验,还能为业务决策提供…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
ABAP设计模式之---“简单设计原则(Simple Design)”
“Simple Design”(简单设计)是软件开发中的一个重要理念,倡导以最简单的方式实现软件功能,以确保代码清晰易懂、易维护,并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计,遵循“让事情保…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
虚拟电厂发展三大趋势:市场化、技术主导、车网互联
市场化:从政策驱动到多元盈利 政策全面赋能 2025年4月,国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》,首次明确虚拟电厂为“独立市场主体”,提出硬性目标:2027年全国调节能力≥2000万千瓦࿰…...
