vue3向树中添加数据

在 Vue3 中，向树形数据结构中添加新节点通常涉及到使用递归和响应式的数据管理。假设你有一个名为 `tree` 的 Vue实例，其中包含一个数组，数组的每个元素表示树的一个节点，你可以使用以下步骤来添加新的节点：

1. **定义数据结构**：
- 假设你的树节点结构类似这样：

     data() {
       return {
         tree: [
           { id: 1, name: '父节点1', children: [] },
           // ...
         ],
       };
     }

2. **添加新节点方法**：
- 创建一个方法来添加新节点，比如 `addChild`：

     methods: {
       addChild(parentId, newNode) {
         this.tree.find(node => node.id === parentId).children.push(newNode);
       },
     }

- 在这个方法里，首先通过 `find` 方法找到指定父节点，然后将其 `children` 数组中添加新节点。

3. **使用方法**：
- 当你想在树中添加一个新节点时，调用 `addChild` 方法：

     const newNode = { id: 100, name: '新节点', parentId: 1 };
     this.addChild(newNode.parentId, newNode);

- 这样，新节点就会被添加到 `parentId` 对应的父节点下。

4. **处理响应式**：
- 如果 `tree` 是响应式的（例如，使用 `ref` 或者 ` reactive`），添加操作会自动更新视图，因为 Vue会监听数组的变化。