vue 在计算属性中递归

在Vue中，计算属性（Computed Properties）是一种非常有用的特性，允许你基于数据的变动来定义响应式的“计算”值。对于递归操作，即在一个计算属性内部再次访问另一个计算属性，这在处理复杂的数据结构，如树形结构或者层级关系时特别有用。

例如，如果你有一个嵌套的对象或数组，你想获取每个元素的深度（层级数），可以这样做：

data() {
  return {
    treeData: [
      { id: 1, name: '父节点1', children: [ { id: 2, name: '子节点1' }, { id: 3, name: '子节点2' }] },
      { id: 4, name: '父节点2', children: [] },
    ]
  }
},
computed: {
  depthOfNode(node) {
    if (!node.children) {
      // 如果当前节点没有子节点，那么它的深度就是1
      return 1;
    } else {
      // 否则，递归调用depthOfNode方法，加1作为当前节点的深度
      return 1 + Math.max(...node.children.map(child => this.depthOfNode(child)));
    }
  },
  maxDepth() {
    // 返回整个treeData中最深的节点的深度
    return Math.max(...this.treeData.map(item => this.depthOfNode(item)));
  }
}

在这个例子中，`depthOfNode`是一个递归计算属性，它会遍历每个节点的子节点，直到没有子节点为止，然后返回总层数。而`maxDepth`计算属性则是通过映射所有节点，再取最大值，得到整个树的最大深度。