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)
  }
)
相关推荐
像风一样自由202028 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理1 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞3 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作