tree组件实现折叠与展开功能（方式1 - expandedTree计算属性）

本示例节选自vue3最新开源组件实战教程大纲（持续更新中）的tree组件开发部分。考察响应式对象列表封装和computed计算属性的使用，以及数组reduce方法实现结构化树拍平处理的核心逻辑。

实现思路

第一种方式：每次折叠或展开后触发扁平化列表的重新计算和渲染。

第二种方式：每次折叠或展开后出发其所有子节点的visible计算属性重新计算，用v-show进行动态渲染。

这里我们先讨论第一种方案的实现。

实现方式

在循环遍历树节点时，增加要渲染的内容：

<div class='juan-tree-node' key=... style=...>
  {/* 渲染节点前的内容，父节点需要展示隐藏或展开按钮，叶子节点留出空的span来占据位置 */}
  {node.isLeaf ? (
    <span class='mr-1 inline-block w-[20px]'</