getter

setter，用于监听数据变化

循环引用导致无限递归

• 在路由过滤函数中，直接访问

  Vuex

  中的菜单数据

• 当访问menu.menuType时，触发

  Vue

  getter

• 由于某些原因（可能是数据结构或

  Vue

  存在循环引用

• 导致无限递归调用，最终堆栈溢出

3.

为什么之前能运行

• 可能之前的菜单数据结构不同
• 或者

  Vue

  的响应式系统配置有变化

• 或者某个依赖更新导致了这个问题

解决方案

核心思路：移除响应式引用

使用

JSON

对象：

//
修改前（有问题）functionfilterRoutesByMenus(routes,menus){constpageMenuNames=[];constextractPageMenuNames=(menuList)=>{menuList.forEach((menu)=>{if(menu.menuType==="2"){//
访问响应式对象，触发无限递归pageMenuNames.push(menu.name);}if(Array.isArray(menu.children)&&menu.children.length>0){extractPageMenuNames(menu.children);}});};extractPageMenuNames(menus);//
...}//
修改后（正确）functionfilterRoutesByMenus(routes,menus){constpageMenuNames=[];//
JSON
序列化移除响应式引用constsafeMenus=JSON.parse(JSON.stringify(menus||[]));constextractPageMenuNames=(menuList)=>{menuList.forEach((menu)=>{if(menu.menuType==="2"){//
访问普通对象，不会触发递归pageMenuNames.push(menu.name);}if(Array.isArray(menu.children)&&menu.children.length>0){extractPageMenuNames(menu.children);}});};extractPageMenuNames(safeMenus);//
...}

为什么这样解决有效

1.

JSON

序列化的作用

• JSON.stringify()将对象转换为

  JSON

  字符串，移除所有响应式特性

• JSON.parse()将

  JSON

  对象

• 得到的对象是纯净的，没有任何

  Vue

  避免响应式触发

  • 普通对象的属性访问不会触发

    Vue

    getter

  • 不会存在循环引用问题
  • 代码可以正常执行，不会陷入无限递归

  3.

  保持功能不变

  • 菜单过滤逻辑完全相同
  • 只是改变了数据源的类型
  • 不影响业务逻辑

  总结

  核心问题：Vue

  响应式对象在特定情况下会触发无限递归

  解决方案：使用

  JSON

  序列化将响应式对象转换为普通对象

  关键点：

  • 响应式对象包含特殊的

    getter/setter

  • 直接访问可能触发无限递归
  • JSON

    Vue

    响应式系统问题，通过移除响应式引用可以有效解决。