vue复杂数据类型多层嵌套的监听

vue复杂数据类型多层嵌套的监听

本来看前辈的做法是watch的嵌套,遇到这种复杂的数据结构还是不多,分享一下前辈的做法

let stopChildWatchList = []  // 用于存放每个子监听器watch(() => data,(val) => {// 清除旧监听stopChildWatchList.forEach(stop => stop())stopChildWatchList = []val.forEach((item, i) => {item.children.forEach((child, j) => {const stop = watch(() => child.tags,(newTags) => {console.log(`data[${i}].children[${j}].tags changed:`, newTags)},{ deep: true })stopChildWatchList.push(stop)})})},{ deep: true, immediate: true }
)

后面我感觉有点不太好读,就去找了一下另一种做法,比较易懂,给自己做个记号

watch(() =>data.flatMap(item =>item.children.flatMap(child => [...child.tags])),(newVal) => {console.log('所有 tags 改了:', newVal)}
)

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

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

相关文章

来一个复古的技术FTP

背景 10年前的老代码,需要升级springboot框架,在升级过程中,测试业务流程里,有FTP的下载业务,不管测试环境如何测试,都没有成功,最后只能自己搭建一个FTP服务器,写一个ftp-demo来测试…

MyBatis-Flex配置Druid(德鲁伊数据库连接池):Spring Boot 3 集成 MyBatis-Flex 配置 Druid 连接池指南

Spring Boot 3 集成 MyBatis-Flex 配置 Druid 连接池指南 前言 本文详细讲解在 Spring Boot 3 项目中集成 MyBatis-Flex 框架后,如何正确配置 Druid 数据库连接池。针对开发者常见的配置缺失导致启动失败的场景,提供完整的解决方案和原理分析。 前置知识…

安全生产调度管理系统的核心功能模块

安全生产调度管理系统是运用现代信息技术构建的智能化管理平台,旨在实现生产安全风险的全面管控和应急资源的优化调度。该系统通过整合物联网、大数据、人工智能等前沿技术,建立起覆盖风险监测、预警预测、指挥调度、决策支持的全链条安全管理体系。 一…

桃芯ingchips——windows HID键盘例程无法同时连接两个,但是安卓手机可以的问题

目录 环境 现象 原理及解决办法 环境 PC:windows11 安卓:Android14 例程使用的是HID Keyboard,板子使用的是91870CQ的开发板,DB870CC1A 现象 连接安卓手机时并不会出现该现象,两个开发板都可以当做键盘给手机发按…

JavaScript - JavaScript 运算符之圆括号运算符与方括号运算符(圆括号运算符概述、圆括号运算符用法、方括号运算符概述、方括号运算符用法)

一、圆括号运算符概述 圆括号运算符(())主要用于函数调用、表达式分组、多种语法结构登 二、圆括号运算符用法 调用函数 function greet() {console.log("Hello!"); }greet();# 输出结果Hello!当箭头函数有多个参数或零个参数时需要括号 c…

AG-UI 协议:重构多模态交互,开启智能应用新纪元

一、协议诞生的时代背景:填补 AI 生态最后一块拼图 在人工智能技术飞速发展的今天,AI 代理(Agent)作为能够主动执行复杂任务的智能实体,正从实验室走向生产环境,重塑各个行业的工作流程。然而,…

嵌入式学习的第二十天-数据结构-调试+链表的一般操作

一、调试 1.一般调试 2.找段错误 二、链表的一般操作 1.单链表的修改 int ModifyLinkList(LinkList*ll,char*name,DATATYPE*data) {DATATYPE * tmp FindLinkList(ll, name);if(NULL tmp){return 1;}memcpy(tmp,data,sizeof(DATATYPE));return 0; } 2.单链表的销毁 int D…

如何同时管理不同平台的多个账号?

在当今数字营销、电商运营、跨境贸易盛行的时代,同时管理多个平台的账号几乎成了从业者的标配。无论是做社媒营销的广告主,还是操作亚马逊、eBay、Shopee 等平台的跨境卖家,多账号运营都是提升曝光、分散风险、扩大收益的重要方式。 然而&am…

STM32外设AD/DA-基础及CubeMX配置

STM32外设AD/DA-基础及CubeMX配置 一,什么是AD/DA二,基础概念1,模拟 vs 数字2,AD转换1,分辨率 (Resolution)2,参考电压 (Reference Voltage, Vref)3,采样率 (Sampling Rate) 3,DA转换…

【软考 霍夫曼编码的文档压缩比】

霍夫曼编码的文档压缩比计算基于字符频率的最优编码分配,以下是详细步骤及相关案例: 一、压缩比计算公式 [ \text{压缩比} \frac{\text{压缩前总比特数}}{\text{压缩后总比特数 编码表存储开销}} ] 通常以 比率(如 3:1) 或 百分…

关闭VSCode 自动更新

参考:关闭VSCode 自动更新_vscode关闭自动更新-CSDN博客 vscode的设置 Update: Mode Update: Enable Windows Background Updates Extensions: Auto Check Updates Extensions: Auto Update

Flask框架搭建

1、安装Flask 打开终端运行以下命令: pip install Flask 2、创建项目目录 在Windows上: venv\Scripts\activate 执行 3、创建 app.py 文件 可以在windows终端上创建app.py文件 (1)终端中创建 使用echo命令 echo "fr…

5G-A和未来6G技术下的操作系统与移动设备变革:云端化与轻量化的发展趋势

目录 5G技术带来的革命性变革 云端化操作系统的实现路径 完全云端化模式 过渡性解决方案 未来操作系统的发展方向 功能架构演进 安全机制强化 移动设备的形态变革 终端设备轻量化 物联网设备简化 实施挑战与应对策略 技术挑战 商业模式创新 总结与展望 5G技术作为…

【漫话机器学习系列】261.工具变量(Instrumental Variables)

工具变量(Instrumental Variables)通俗图解:破解内生性困境的利器 在数据建模与因果推断过程中,我们经常遇到一个棘手问题:内生性(Endogeneity)。它会导致模型估计产生偏差,进而误导…

CSS:颜色的三种表示方式

文章目录 一、rgb和rgba方式二、HEX和HEXA方式(推荐)三、hsl和hsla方式四、颜色名方式 一、rgb和rgba方式 10进制表示方法 二、HEX和HEXA方式(推荐) 就是16进制表示法 三、hsl和hsla方式 语法:hsl(hue, satura…

支付宝授权登录

支付宝授权登录 一、场景 支付宝小程序登录,获取用户userId 二、注册支付宝开发者账号 1、支付宝开放平台 2、点击右上角–控制台,创建小程序 3、按照步骤完善信息,生成密钥时会用到的工具 4、生成的密钥,要保管好&#xff…

涂色不踩雷:如何优雅解决 LeetCode 栅栏涂色问题

文章目录 摘要描述例子: 题解答案(Swift)题解代码分析动态规划核心思路初始条件 示例测试及结果示例 1:示例 2:示例 3: 时间复杂度空间复杂度总结实际场景联系 摘要 在用户体验和界面设计中,颜…

GEE计算 RSEI(遥感生态指数)

🛰️ 什么是 RSEI?为什么要用它评估生态环境? RSEI(遥感生态指数,Remote Sensing Ecological Index) 是一种通过遥感数据计算得到的、综合反映区域生态环境质量的指标体系。 它的设计初衷是用最少的变量&…

图像处理:预览并绘制图像细节

前言 因为最近在搞毕业论文的事情,要做出一下图像细节对比图,所以我这里写了两个脚本,一个用于框选并同时预览图像放大细节,可显示并返回框选图像的坐标,另外一个是输入框选图像的坐标并将放大的细节放置在图像中&…

基于javaweb的SSM驾校管理系统设计与实现(源码+文档+部署讲解)

技术范围:SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…