Vue搭建无限级树！数据结构设计秒变树形图

一、数据结构的设计

搞定无限级列表，先得选好数据结构搞定关系。树形结构就挺好使，Vue里用一堆有ID、名字和父ID属性的对象就能搞定了。

每个节点这边，有个独一无二的身份证号码叫ID，这个大家都知道；还有个名字叫name；还有个爹的身份证号叫parent_id。如果这个爹的身份证号是0，那就说明这货是大佬，是根儿节点。这个设计就是让咱们看清每颗节点之间的关系，方便后面的树形图搭建。

二、树状图的构建

[
    {id: 1, name: '菜单1', parent_id: 0},
    {id: 2, name: '菜单2', parent_id: 0},
    {id: 3, name: '菜单1-1', parent_id: 1},
    {id: 4, name: '菜单1-1-1', parent_id: 3},
    {id: 5, name: '菜单1-2', parent_id: 1},
    {id: 6, name: '菜单2-1', parent_id: 2},
    {id: 7, name: '菜单1-1-1-1', parent_id: 4}
]

搞定vue里的无限级列表，就得把原始数据变成像树那样的结构。怎么做？就是写个递归函数，挨个处理每一个节点，然后把他们加到相应父节点的孩子列表里去。

我们可以用递归来搞定这个问题，把每个node都扔进它爸爸那家伙的children数组里去，最后就能得到一棵完整的大树！这样一来，我们以后处理这棵树，还有展示无限层级列表就会变得超级简单

三、列表的展示

Vue有v-for指令可以用来循环显示数据。想搞无限级列表？用递归组件能让它看起来更顺眼。在组件里面设个标签，把当前节点和它的孩子们都给渲染出来就行。

每次渲染时，都用递归调用来搞定当前节点和它的后代们，这样整个树型结构就出来！再用props传个数据给组件里头，动态地逐个渲染每一个节点，就能展现出没完没了的多层列表~

四、节点折叠和展开功能

function buildTree(list, parentId) {
    let res = []
    for (let i = 0; i < list.length; i++) {
        if (list[i].parent_id === parentId) {
            let children = buildTree(list, list[i].id)
            if (children.length) {
                list[i].children = children
            }
            res.push(list[i])
        }
    }
    return res
}
let treeData = buildTree(list, 0)

为了让大家用的更舒服，在这个无穷无尽的列表里面，都有个折叠展开的功能！那怎么实现？咱们就在组件里加个叫 isCollapsed 的属性就行了，它反映了当前节点是不是已经被折叠起来了。然后通过控制这个属性，就能随心所欲地显示或者藏起那些可爱的子节点！

我们用v-show来控制子节点的露出与否，同时在点击时改变isCollapsed属性值，这样用户就能轻松对不同层级的节点进行折叠或展开了，更容易查看和整理信息。

五、搜索功能的添加

不只是展示和互动，要让用户更顺手，还得添个搜索功能！咱们就在组件里放个搜索框，留意下输入内容变了没，然后把树状图上能满足这些条件的节点挑出来显示就好。

用个递归算法，就能在这个树里快速找到有关键词的结点，还能自动刷新展示结果，让大家很快就找到想要的内容。这样一来，使用起来更方便，系统也更好使了。

六、拖拽排序功能

大家常用的就是拖拽排序功能，就连无限级别的列表也是可以用的。只要加上拖拽事件监听和HTML5拖放API，就能轻松搞定树状结构的拖拽排序了。

    

        

            {{item.name}}
            
        
    


export default {
    name: 'recursive',
    props: {
        list: Array
    }
}

当你去点那个节点时，得把握住机会！注意看哪个是被拖动的目标，松手时目的地在哪儿也别放过。就这样搞来搞去，你就能随心所欲地打乱或安排节点了。

七、性能优化策略

随着我们收集到的数据越来越多，列表的分级也会越来越深，可能会影响性能。所以，我们得在开发时想想办法提高速度和反应能力。

比如用懒加载技术，一开始就只呈现我们能看到的地方，然后再慢慢把后面的东西加上去；还有那个 Virtual Scrolling 技术，遇到大数据量也不怕，我们只要看到的内容就行了，这样浏览器就不用那么辛苦了。

八、移动端适配

现在手机用得多了，我们得看看怎么把无级别列表在手机上弄得合适些。要注意屏幕大小和操作方式这些东西，然后做适当的变动。

用响应式设计让手机上看起来更美，操作也更方便些；用手指来操作，就不需要鼠标，这样感觉更顺手；再根据屏幕大小调整样式，不论什么设备都能好好看。这些都能提高手机用户的满意度。

    

        

            
{{item.name}}
            
        
    


export default {
    name: 'recursive',
    props: {
        list: Array
    },
    data() {
        return {
            isCollapsed: true
        }
    }
}

九、安全性考虑

在交互式应用中，保护用户隐私和数据安全真的很关键！搞无限级列表时，千万要警惕那些可能会危及你网站安全的XSS攻击、CSRF攻击之类的危机。

保护网站安全，我们要注意处理好前端用户输入信息、安装最新的框架和插件来堵住那些已知的漏洞，再加上HTTPOnly Cookie这些防护方法，这样才能让网站更牢固！

十、社区资源与学习资料推荐

别光看官网，这里还有好多学习Vue框架和无限级列表的好资源！比如 Vue Mastery、Vue.js Developers这俩网站，课程多又专业；GitHub上也有很多开源项目可以参考学习哦；另外，参加Vue社区讨论、分享经验也是个不错的选择。

这篇文章就来讲讲我们怎么用Vue做无限级列表！希望你看了能对如何在复杂场景下用Vue搞定前端开发有更深的了解，还能让自己的技术和经验更上一层楼！