本示例节选自vue3最新开源组件实战教程大纲（持续更新中）的tree组件开发部分。考察Vue3 Composition API形式的计算属性的用法，computed可以单独用在ts文件中，实现ts的计算属性类型的定义。

父节点属性

在IFlatTreeNode中定义父节点，以取代之前定义的parentId

export interface IFlatTreeNode extends ITreeNode {
  parent?: IFlatTreeNode // 关联父节点
  ...
}

调整generateFlatTree的入参，pid改为parent，要调整的地方：

visible计算属性

在IFlatTreeNode中新加属性：visible: ComputedRef<boolean>。注意它的类型为ComputedRef。

这里给出该计算属性的绑定实现：

initFlatTreeNode函数在generateFlatTree的data.reduce(...)中完成调用。

模板调整

去掉之前示例的expandedTree计算属性的定义和使用，加上v-show指令，还要注意更新了IFlatTreeNode的属性类型定义：visible: ComputedRef<boolean>，而在这里会发生类型丢失：visible: boolean，造成不兼容，所以我们按照建议加上as never即可。

测试效果：

现在折叠的节点不是重新渲染而是样式隐藏：