来源 | https://juejin.im/post/5dee042151882512591aa402
简介
有人说递归很难理解,也有人不这么认为。 递归函数简单的定义是: 一个自调用函数,这意味着它将在执行的某个时刻调用自己。 从理论上讲,递归是一种需要两个属性的行为:结束点:停止递归的情况
一组规则:负责将所有的操作减少到结束点
递归和 Vue 组件
在 Vue 中,递归非常有用。 当然,不仅仅在 Vue 中,咱们可以遵循上面的规则在任何框架中实现递归行为。 因此,根据给定的定义,咱们可以说递归组件是调用自身的组件。 递归组件什么时候有用? 只要咱们需要使用相同的模板结构,但需要使用分层输入数据,就可以使用递归。 如果树状视图(用于显示文件夹结构),网站上的注释,嵌套菜单等组件等等。 接着,咱们建立一个场景来演示递归组件的用途。场景
想象一下,咱像往常一样来上班,给自己冲杯咖啡,开始阅读咱最喜欢的博客。 突然,咱们的老板来了,说需要实现一个新的页面,在这个页面上,显示所有的文件夹、子文件夹和文件,且文件结构数量不确定。 可以显示10
个、
5
个或
100
个文件夹。 接着,咱们喝着咖啡,开始挠头思考如何解决这个问题。 最终,咱们会想到使用递归遍历来实现。 解决这个问题的组件的最少数量是
1
,但在咱们的示例中,咱们会创建两个组件:
root 组件
folder 组件