Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现-创新互联

写在前面

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

开发过程

1.数据仓库-Vuex

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

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

因此 树状结构的data是变化的而不是在初始化的时候就固定好 的，数据驱动Dom的思想，data有多少层级，Dom就有多少层级，data不定，所以Dom也无法提前定义好层级，决定采用Vue的递归组件，组件递归自身实现无限制层级的渲染。需求中每一个节点的Tree都具有增删改的功能，因为data是单例的，全局维护着一个data数据源头，增删改也就是操作data第n个子节点的某个子元素，因此采用了Vuex作为一个data存放的仓库( 这不是一个组件库,只是一个项目的应用 )。

项目的关键点:

1.动态加载子节点,也就是说页面加载的时候,根节点的 nodes 子节点数组可能是个空数组,每次单击节点去获取子节点数组。

2.全局单例的树节点对象 data 对象,每次得到新的子节点，需要去维护这个对象,因为数据与dom动态绑定,所以每次数据对象内部发生了变化,dom也会重绘。

vue对虚拟dom的映射通过使用diff算法进行了优化,所以不用担心，重绘造成页面闪屏

树 data 数据结构如下:

let data = {
 id: "01",
 lable: "政府机构",
 nodes: [
  {
  id: "02",
  lable: "中央机关",
  nodes: [{
   //..
  }]
  },
  {
  id: "03",
  lable: "直辖市",
  nodes: [{
   //..
   //北京市...
   //天津市..
  }]
  },
 ]
 };