【Vue】watch监听复杂数据,新值与旧值一样

news2024/11/20 19:25:38

问题

  • watch监听复杂数据,例如数组,旧值与新值一样

解决方案

  • 监听回调里返回新数组,新、旧数组地址改变,得到的值也就不一样,例↓
    • ()=>[...data]

test.js

// 数据
const musicList = ref([
    { id: '540000200805012335' },
    { id: '140000201508105754' } 
])

// 监听 | 重点 | 回调里返回新数组,数组地址改变,新值旧旧值就不会一样
watch(()=>[...musicList.value], (n, o) => {
    console.log(n, o);
}, {
    deep: true
})

// 1秒后删除某个数据
setTimeout(() => {
    musicList.value.shift() 
}, 1000);

结果图|红框为新值

在这里插入图片描述

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

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

相关文章

兑换码生成算法

兑换码生成算法 兑换码生成算法1.兑换码的需求2.算法分析2.重兑校验算法3.防刷校验算法 3.算法实现 兑换码生成算法 兑换码生成通常涉及在特定场景下为用户提供特定产品或服务的权益或礼品,典型的应用场景包括优惠券、礼品卡、会员权益等。 1.兑换码的需求 要求如…

软考--软件设计师(软件工程总结2)

目录 1.测试方法 2.软件项目管理 3.软件容错技术 4.软件复杂性度量 5.结构化分析方法(一种面向数据流的开发方法) 6.数据流图 1.测试方法 软件测试:静态测试(被测程序采用人工检测,计算机辅助静态分析的手段&…

MyBatis 解决上篇的参数绑定问题以及XML方式交互

前言 上文:MyBatis 初识简单操作-CSDN博客 上篇文章我们谈到的Spring中如何使用注解对Mysql进行交互 但是我们发现我们返回出来的数据明显有问题 我们发现后面三个字段的信息明显没有展示出来 下面我们来谈谈解决方案 解决方案 这里的原因本质上是因为mysql中和对象中的字段属性…

构建未来交通:香橙派OPI Airpro上的智能交通监管系统

引言: 随着城市化进程的加速,交通管理变得越来越复杂。 传统的交通监管系统往往无法有效应对日益增长的车辆数量和复杂的交通状况。因此,我们需要一种更加智能和自适应的解决方案来提高交通效率并减少事故发生率。 香橙派OPI Airpro以其强大的…

07 - D触发器

---- 整理自B站UP主 踌躇月光 的视频 1. 电路实现 将 D 接到 S 端,D 取反接到 R 端,两个输入合成一个输入,R 和 S 总是相反的,就构成了 D 触发器。再添加一个EN,作为锁存功能,EN0 时,R 和 S 都…

Mac删除软件,动一动手指,几秒就彻底删除 mac删除软件删不掉的解决方法 mac删除软件后怎么删除软件数据

当你入职新公司,接手前任员工使用的Mac电脑时,很可能会遇到一个非常普遍的问题:电脑中装有大量你不需要的软件。这些软件不仅占用宝贵的硬盘空间,还可能影响电脑的运行速度和效率。为了获得一个干净、清爽的使用体验,删…

Go协程池gopool源码解析

1、gopool简介 Repository:https://github.com/bytedance/gopkg/tree/develop/util/gopool gopool is a high-performance goroutine pool which aims to reuse goroutines and limit the number of goroutines. It is an alternative to the go keyword. gopool的…

【Java基础知识总结 | 第十篇】HashSet底层实现原理

文章目录 10.HashSet底层实现原理10.1HashSet特点10.2HashSet源码10.3 add流程10.4总结 10.HashSet底层实现原理 10.1HashSet特点 存储对象:HashSet 存储对象采用哈希表的方式,它不允许重复元素,即集合中不会包含相同的元素。当向 HashSet …

Linux_进程信号_7

文章目录 1.什么是信号2.信号列表3.信号处理常见方式4.信号的存储5.信号产生前-中-后1.信号产生前2.信号产生中 6产生信号1.signal2.kill3.raise4.abort5.alarm6.硬件异常 7.core dump8.信号产生中1. sigset_t(数据类型)2.信号集操作函数1.sigprocmask2.…

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

Vue3中监听多条数据的两种使用 1.watch【使用上一章写法,监听两个属性,然后执行相应操作…】 2.watchEffect【相对于使用watch,watchEffect默认页面初始加载,有点类似加配置:立即执行 immediate】 代码: …

Python:百度AI开放平台——OCR图像文字识别应用

一、注册百度AI开放平台 使用百度AI服务的步骤为: 注册:注册成为百度AI开放平台开发者;创建AI应用:在百度API开放平台上创建相关类型的的AI应用,获得AppID、API Key和Secret Key;调用API:调用…

Word中插入Endnote参考文献时显示乱码

近期在写文章需要插入参考文献,使用Endnote插入时显示乱码,如下图所示: 文章末尾显示{ADDIN EN REFILIST } 解决方法 在网上找了诸多方法尝试也没有解决,最终找到一篇博客介绍了一种方法: word选项—高级&#xff1…

苍穹外卖07(缓存菜品,SpringCache,缓存套餐,添加购物车菜品和套餐多下单,查看购物车,清除购物车,删除购物车中一个商品)

目录 一、缓存菜品 1 问题说明 2 实现思路 3 代码开发:修改DishServiceImpl 4 功能测试 二、SpringCache 1. 介绍 2. 使用语法 1 起步依赖 2 使用要求 3 常用注解 4 SpEL表达式(了解备用) 5 步骤小结 3.入门案例 1 准备环境 2 使用入门 1 引导类上加…

四、MySQL读写分离之MyCAT

一、读写分离概述 1、什么是读写分离: 读写分离:就是将读写操作分发到不同的服务器,读操作分发到对应的服务器 (slave),写操作分发到对应的服务器(master) ① M-S (主从) 架构下&…

【测试篇】测试用例

文章目录 前言具体设计测试用例等价类边界值场景设计法判定表(因果图)正交排列(用的非常少)错误猜测法 前言 什么是测试用例?? 测试用例是针对软件系统或应用程序的特定功能或场景编写的一组步骤&#xf…

记一次Cannot deploy POJO class [xxx$$EnhancerBySpringCGLIB$$xxx]的错误

最近项目上需要使用websocket做服务端&#xff0c;那好说啊&#xff0c;直接springboot集成的websocket 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><versi…

开源推荐榜【Pear Admin Flask 用python来创建后台管理系统】

最新技术高效快速开发&#xff0c;前后端分离模式&#xff0c;开箱即用。 核心模块包括&#xff1a;用户、角色、职位、组织机构、菜单、字典、日志、多应用管理、文件管理、定时任务等功能。 代码量少、学习简单、功能强大、轻量级、易扩展&#xff0c;轻松开发从现在开始&…

【OpenCV】图像像素的遍历

1 前言 介绍两种遍历像素的方法&#xff08;非指针、指针&#xff09;。注意&#xff1a;.at() .ptr()的作用、用法。相关API&#xff1a; Mat对象.ptr() Mat对象.at() 2 代码及内容 #include "iostream" #include "opencv2/opencv.hpp"using namespac…

聊聊测试用例评审流程

测试人员将需求熟悉完成后&#xff0c;开始编写相应的测试用例&#xff0c;待测试用例编写完成后只是测试用例完成前的第一步&#xff0c;后边的流程需要组织线上或线下评审会议等等。 首先要了解测试用例评审的最终目的是什么&#xff1a;提高测试用例的质量和覆盖率&#xff…

notification+Android笔记

notification通知应用UI之外的消息并显示即推送&#xff1b; NotificationManager负责管理通知&#xff0c;例如显示取消&#xff0c;删除等&#xff1b; import android.app.Notification; import android.app.NotificationChannel; import android.app.NotificationManager;…