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)
  }
)
相关推荐
SchuylerEX3 分钟前
第六章 JavaScript 互操(3)JS调用.NET
前端·javascript·c#·.net·blazor
默默地离开6 分钟前
从0到1掌握React+TypeScript开发:前端工程化实践指南
前端·react.js·typescript
Spider_Man7 分钟前
手指一拉,世界焕新:移动端下拉刷新全攻略
前端·javascript·react.js
恋猫de小郭9 分钟前
Flutter 里的 Layer 解析,带你了解不一样角度下的 Flutter 渲染逻辑
android·前端·flutter
1phoenix10 分钟前
JavaScript 实现自定义右键菜单
前端·javascript·css
迷你二鹏11 分钟前
前端之Git
前端·git
二闹25 分钟前
大厂前端研发岗位设计的30道Webpack面试题及解析
前端·面试
拾光拾趣录30 分钟前
实现 `this` 对象的深拷贝:从“循环引用崩溃”到生产级解决方案
前端·javascript
无羡仙32 分钟前
90%的人都在用的下拉刷新,我把它拆了!
前端·node.js
一念杂记32 分钟前
【实战系列】30分钟开发微信小程序登录&注册&绑定功能
前端·后端·微信小程序