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

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

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

javascript 复制代码
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 }
)

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

javascript 复制代码
watch(
  () =>
    data.flatMap(item =>
      item.children.flatMap(child => [...child.tags])
    ),
  (newVal) => {
    console.log('所有 tags 改了:', newVal)
  }
)
相关推荐
带娃的IT创业者3 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
二十雨辰3 小时前
vite如何处理项目中的资源
开发语言·javascript
非凡ghost4 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11064 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白4 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学5 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽5 小时前
【初学】调试 MCP Server
前端·mcp
四月_h6 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate6 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
正义的大古7 小时前
OpenLayers地图交互 -- 章节十八:拖拽旋转和缩放交互详解
javascript·vue.js·openlayers