Vue3 Composition API计算属性实现扁平化树节点的索引

本教程是Vue3 composition api计算属性活学活用（作业题1 - 计算扁平化树树节点的索引）的答案。通过该示例，让读者进一步巩固Vue3 Computed计算属性的最佳实践。

本作业题所使用的index计算属性在后续自定义Tree组件的高级功能实现中有着重要的应用。相信读者朋友经过前面的学习早有了答案。

实现思路

依然是对计算属性进行递归的思想：要计算当前节点的index，只要知道它前一个节点prev的index就行了，在此基础上加1，如果是第一个节点，index直接返回0即可。

实现步骤

新增节点属性：

export interface IFlatTreeNode extends ITreeNode {
  ...
  prev?: IFlatTreeNode // 前置节点，第一个节点的prev为空
  index: ComputedRef<number> // 节点在扁平化列表中的索引
}

tree/index.tsx

...
import JuanButton from '@/components/button'

export default defineComponent({
  ...
  setup(props: Props) {
    ...
    // 试着移除“22”节点，看index计算属性的变化
    const remove = () => {
      const next = flatData.value[4]
      const prev = flatData.value[2]
      flatData.value.splice(3, 1)
      next.prev = prev
    }
    return () => {
      return (
        <div class='juan-tree'>
          <JuanButton type='primary' onClick={remove}>
            删除22
          </JuanButton>
          {flatData.value.map((node) => (
            <div key=... class='juan-tree-node' ...>
              ...
              <span class='ml-4 text-green-600'>{node.index}</span>
            </div>
          ))}
        </div>
      )
    }
  }
})