vue实现递归函数
Vue 中实现递归函数的方法
递归函数在 Vue 中可以用于处理树形结构数据、菜单渲染等场景。以下是几种实现方式：
使用递归组件
Vue 组件支持递归调用自身，适用于渲染嵌套数据结构：
<template>
<div>
<div>{{ node.name }}</div>
<recursive-component
v-if="node.children"
v-for="child in node.children"
:key="child.id"
:node="child"
/>
</div>
</template>
<script>
export default {
name: 'RecursiveComponent', // 必须命名才能递归
props: {
node: Object
}
}
</script>在 methods 中定义递归函数
常规 JavaScript 递归函数可以在 Vue 的 methods 中定义：
methods: {
factorial(n) {
if (n === 1) return 1
return n * this.factorial(n - 1)
}
}递归渲染列表
结合 v-for 和条件判断实现递归渲染：
<template>
<ul>
<li v-for="item in treeData" :key="item.id">
{{ item.name }}
<ul v-if="item.children && item.children.length">
<tree-node :treeData="item.children"/>
</ul>
</li>
</ul>
</template>
<script>
export default {
props: ['treeData']
}
</script>递归计算属性
对于需要缓存结果的递归计算：
computed: {
flattenedTree() {
const flatten = (nodes) => {
return nodes.reduce((acc, node) => {
return [...acc, node, ...flatten(node.children || [])]
}, [])
}
return flatten(this.treeData)
}
}注意事项
- 递归组件必须设置
name选项才能调用自身 - 对于深层递归，考虑添加终止条件避免无限循环
- 大数据量时递归可能导致性能问题，可改用迭代算法
- 在 Vue 3 的
<script setup>中，递归组件需要额外处理
示例：递归菜单组件
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.title }}
<recursive-menu
v-if="item.children"
:items="item.children"
/>
</li>
</ul>
</template>
<script>
export default {
name: 'RecursiveMenu',
props: {
items: {
type: Array,
required: true
}
}
}
</script>以上方法可根据具体需求选择使用，递归组件适合UI渲染，而methods中的递归函数适合数据处理。
