递归方式渲染嵌套的菜单项

1. 递归组件

递归方式渲染嵌套的菜单项，这个是非常好的做法。为了避免在每个子菜单上都渲染一个新的 <ul> 标签，可以使用 v-if 来判断是否有子菜单，再决定是否渲染子菜单的部分。

2. 提高性能

对于递归渲染组件，Vue 可能会频繁地进行组件的重新渲染，尤其是菜单项很多的情况下，性能可能会受到影响。为了优化性能，可以通过 v-show 或者 v-for 的 key 来提高渲染效率。

3. 增强可维护性和可扩展性

• 使用 v-bind 来动态绑定 key，避免手动绑定 key="item.id"。
• 使用 scoped CSS 来避免样式污染。

优化后的代码如下：

1. 模板部分（<template>）

<template>
  <div>
    <ul>
      <MenuItem v-for="item in menu" :key="item.id" :item="item" />
    </ul>
  </div>
</template>

2. 子组件部分（MenuItem.vue）

为了实现递归，我们可以将渲染菜单项的逻辑提取到一个子组件 MenuItem 中。

<template>
  <li>
    {{ item.name }}
    <ul v-if="item.children && item.children.length > 0">
      <MenuItem
        v-for="child in item.children"
        :key="child.id"
        :item="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  props: {
    item: Object
  }
};
</script>

3. 主组件部分（<script>）

在主组件中，直接引入并使用 MenuItem 组件：

<script>
import MenuItem from './MenuItem.vue';

export default {
  components: {
    MenuItem
  },
  data() {
    return {
      menu: [
        {
          id: 1,
          name: "主菜单1",
          children: [
            {
              id: 11,
              name: "子菜单1-1",
              children: []
            },
            {
              id: 12,
              name: "子菜单1-2",
              children: [
                {
                  id: 121,
                  name: "子菜单1-2-1",
                  children: []
                }
              ]
            }
          ]
        },
        {
          id: 2,
          name: "主菜单2",
          children: []
        }
      ]
    };
  }
};
</script>

4. 样式优化（<style scoped>）

可以使用 scoped 样式来局部控制样式，防止样式污染到其他组件。

<style scoped>
ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  padding: 5px;
  cursor: pointer;
}

li:hover {
  background-color: #f0f0f0;
}
</style>

5. 性能考虑：

• 在递归渲染时，应该确保每个 li 和 ul 都有唯一的 key，这样Vue可以高效地管理DOM更新。
• 如果菜单数据较大，可以使用虚拟化技术（如vue-virtual-scroller）来优化渲染性能。

原文地址：https://blog.csdn.net/weixin_55932347/article/details/144402325

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！