接口获取数组后，循环修改树形数据属性名 vue3 写法

可以使用 Vue 3 的响应式系统和遍历算法来实现循环修改树形数据属性名的功能。具体实现方式如下：

1. 定义一个函数 `updateTreeData`，该函数接受两个参数：`treeData` 和 `oldKey`，其中 `treeData` 是一个树形数据数组，`oldKey` 是要修改的属性名。

2. 在函数内部，使用 Vue 3 的 `reactive` 函数将 `treeData` 转换为响应式对象，并使用 `traverseTreeData` 函数遍历树形数据。

3. 在 `traverseTreeData` 函数中，使用 `Object.keys` 函数获取每个节点的属性名，并判断是否与 `oldKey` 相同。如果相同，则使用 `Reflect.defineProperty` 函数修改属性名，并将新属性名添加到节点中。

4. 最后返回修改后的树形数据数组。

示例代码如下：

import { reactive } from 'vue'

function updateTreeData(treeData, oldKey) {
  const reactiveTreeData = reactive(treeData)

  function traverseTreeData(data) {
    if (Array.isArray(data)) {
      data.forEach(item => traverseTreeData(item))
    } else if (typeof data === 'object') {
      const keys = Object.keys(data)
      keys.forEach(key => {
        if (key === oldKey) {
          const newKey = 'newKey'
          Reflect.defineProperty(data, newKey, Object.getOwnPropertyDescriptor(data, oldKey))
          delete data[oldKey]
          data[newKey] = true
        } else {
          traverseTreeData(data[key])
        }
      })
    }
  }

  traverseTreeData(reactiveTreeData)
  return reactiveTreeData
}

使用示例：

const treeData = [
  {
    id: 1,
    name: 'node1',
    children: [
      {
        id: 2,
        name: 'node2',
        children: [
          {
            id: 3,
            name: 'node3',
            isLeaf: true
          }
        ]
      }
    ]
  }
]

const updatedTreeData = updateTreeData(treeData, 'isLeaf')
console.log(updatedTreeData)

输出结果：

[
  {
    id: 1,
    name: 'node1',
    children: [
      {
        id: 2,
        name: 'node2',
        children: [
          {
            id: 3,
            name: 'node3',
            newKey: true
          }
        ]
      }
    ]
  }
]