如何将Vue递归组件改写为长尾词？

本文共计1753个文字，预计阅读时间需要8分钟。

在本文中，首先介绍所开发的组件。该组件并非基于现有开源线上组件，而是专为特定项目需求定制开发。若您急需一个插件来完成项目，而这个组件无法提供即时帮助，那么请参考以下两篇文章进行开发：

1. 《组件开发基础：从零开始构建您的插件》

2.《深入组件开发：优化与性能提升》

写在前面

首先，本篇文章所开发的组件并非一个已经开源的上线组件，所以如果你急于需要一个插件来只做你的项目，那么并不能带给你及时的帮助。这个组件的开发预计写两篇文章，一遍写组件，一篇写组件逻辑。这篇文章也是我自己开发的从无到有的过程，所以它可以为你提供一些Tree组件开发的思路，代码写到一定程度，不能完全依赖插件了，有时间可以看看插件源码或者动手去开发，这样真的能加深对技术的掌握程度。

开发过程

1.数据仓库-Vuex

2.组件的循环创建-递归组件

需求决定了我的技术选型，项目需求是一个中国各级政府列表的选择，后台基于大数据去汇总各级政府网站的文章决策，然后交给前端去展示，左侧显示各级政府的Tree，右侧显示具体文章。因为政府数据的不确定性，所以显示政府的Tree的每一层级也是动态获取的，就比如北京市下级的海淀区政府在一小时前可能不存在某某政策文章,那么北京市节点的子节点中就不会包含海淀区这一子节点，但是10分钟前网站发布了一篇文章,那么就需要在北京市中添加海淀区，为了良好的实时性效果,每一级的子节点都不固定。

因此 树状结构的data是变化的而不是在初始化的时候就固定好 的，数据驱动Dom的思想，data有多少层级，Dom就有多少层级，data不定，所以Dom也无法提前定义好层级，决定采用Vue的递归组件，组件递归自身实现无限制层级的渲染。