循环修改树形数据属性名 vue3 写法

在 Vue3 中，你可以使用 `watch` 监听数据的变化，在回调函数中递归遍历树形数据并修改属性名。具体实现可以参考下面的代码：

<template>
  <div>
    <!-- 渲染树形数据 -->
    <ul>
      <template v-for="item in treeData">
        <li :key="item.id">
          {{ item.label }}
          <template v-if="item.children">
            <Tree :tree-data="item.children" />
          </template>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  name: 'Tree',
  props: {
    treeData: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    // 监听 treeData 的变化
    watch(
      () => props.treeData,
      (newData) => {
        // 递归遍历树形数据并修改属性名
        renameProp(newData, 'name', 'label');
      }
    );

    // 递归修改属性名
    function renameProp(data, oldProp, newProp) {
      data.forEach((node) => {
        if (node.hasOwnProperty(oldProp)) {
          Object.defineProperty(node, newProp, Object.getOwnPropertyDescriptor(node, oldProp));
          delete node[oldProp];
        }
        if (node.children) {
          renameProp(node.children, oldProp, newProp);
        }
      });
    }

    return {};
  }
};
</script>

在上面的代码中，我们定义了一个名为 `Tree` 的组件，接受一个名为 `treeData` 的树形数据作为 prop。在组件的 `setup` 函数中，我们使用 `watch` 监听 `treeData` 的变化，在回调函数中递归遍历树形数据并修改属性名。`renameProp` 函数接受三个参数：`data` 表示当前节点数组，`oldProp` 表示要修改的属性名，`newProp` 表示修改后的属性名。对于每个节点，如果包含要修改的属性名，则使用 `Object.defineProperty` 方法将属性名修改为新的属性名，然后删除旧的属性名。接着，如果该节点包含 children 属性，则递归调用 `renameProp` 函数进行属性名修改。

需要注意的是，上面的代码中使用了 `Object.defineProperty` 方法修改属性名，这会使得属性变为不可枚举。如果需要枚举该属性，可以使用 `Object.assign` 方法将属性拷贝到一个新对象上，或者使用 `Reflect.ownKeys` 方法获取所有自身属性名和 Symbol 属性名。