vue中递归调用函数,返回满足条件的完整数据

在Vue.js中，递归调用函数通常用于处理树形结构的数据，例如菜单、文章分类等，需要遍历并查找所有子节点，直到找到符合条件的数据。递归的关键在于有一个终止条件和每次调用自身的更新过程。

举个例子，假设我们有一个`dataList`数组表示一个嵌套的对象数组：

dataList = [
  {
    id: 1,
    name: '父级1',
    children: [
      { id: 2, name: '子级1', ... },
      { id: 3, name: '子级2', ... }
    ]
  },
  { ... } // 更多层级
]

我们可以编写一个名为`findDataById`的递归函数：

function findDataById(dataList, targetId) {
  return dataList.reduce((acc, item) => {
    if (item.id === targetId) {
      acc.push(item); // 如果找到目标id，直接添加到结果数组
    } else if (item.children && item.children.length > 0) {
      acc.push(...findDataById(item.children, targetId)); // 递归搜索子节点
    }
    return acc;
  }, []);
}

// 使用示例
const result = findDataById(dataList, 2);

这个函数会在整个`dataList`及其子节点中寻找ID为`targetId`的项，并返回包含所有满足条件的完整数据。