【小彬学vue系列专栏】 002 | 一颗树的惆怅

1.发现了什么

小彬发现了一个好东西。

这个新鲜玩意就是ElementUI（小彬简称为：EUI） 。在小彬理解中 EUI 就是 Bootstrap 外面套了一层 Vue 的壳，这个东西也有另一个名字，Vue组件。小彬统计过，EUI 共有 67 个组件，可见把 EUI 页面元素分的够细了。小彬脑海中闪现一副 Vue 手册上的一副图，也许 EUI 就是对这张图的忠诚诠释。

2.我想有棵树

最近小彬很苦恼，具体点是说是前端小美的苦恼，她想将一批数据按树层级的方式显示在页面上，EUI想要的数据格式是这样，由 label 和 children 组成的嵌套数据结构。

[{
    label: '测试1',
    children: [{
        label: '测试3',
        children: [{
            label: '测试6',
            children:[{
                'label':'子7'
            }]

        }]
    }]
}]

EUI 最终渲染出的效果是这样

要怎么处理成 EUI 树形控件所需要的数据结构，小彬思索了很久，并借助网上搜索的信息实现了对数据的树形化处理。

<script>
    var data = [
        { id: 3, name: "测试3", pid: 1 },
        { id: 1, name: "测试1", pid: 0 },
        { id: 6, name: "测试6", pid: 3 },
        { id: 7, name: "子7", pid: 6 },

    ];

    function toTree(data) {
        var map = {};
        data.forEach(function (item) { 
            map[item.id] = item;
        });

        var val = [];
        data.forEach(function (item) {
            item.label = item.name;
            var parent = map[item.pid]; 
            if (parent) {
                (parent.children || ( parent.children = [] )).push(item);
            } else {
                val.push(item);
            }
        });
        return val;
    }
    console.log(toTree(data))
</script>

代码的执行结果，可以直接用于EUI的树数据结构。

3.为什么会是这样

小彬这时有些疑问，就是这么几行代码，它的实现原理是什么呢？小彬对代码做了反复的调试运行，最后发现了构建树的关键：引用传值，也是取址。

小彬结合自己的后端经验进行思考，后端在一般给变量赋值时，默认用的是取值操作，这种情况会在内存中会重新开辟一个存储空间存放这个值。如果使用取址的方式，则需要使用&符号，这个符号其实也隐喻着「链接」的意思，使用这个符号后，取到的不是这个值而是这个值对应在内存中的地址，该变量还是指向之前变量的内存存储空间地址，而不会新开辟空间。

反观JavaScrpt前端，它在使用对象或数组数据类型时默认使用的是引用赋值，而正是这个特性，使得 JS 对EUI树的构建，用几行代码就能完成。

就是这么简洁,一切都很美好。

小彬通过理解这个原理，并使用世界上最好的PHP语句，在后端实现了EUI树结构数据构建的预处理，从而为前端小美同学默默分担了那一分的惆怅。

最终后端处理EUI树状数据，前端接收到数据，渲染显示效果如下

4.总结

1.ElementUI是封装好的vue的组件
2.知道了ElementUI树的实现原型
3.完成了一个树结构前后端代码的实现