最近在使用Vue3重构项目，其中，同事写的左侧菜单组件，打开的时候总是要卡顿一下，然后再展示菜单。分析了下原因，大概是因为菜单太多，层级也比较深。导致渲染效率比较低。

菜单多我们是没有办法解决的，但是用户体验还是要尽可能地优化。我突然想到了最近在短视频平台上学到的一种渲染组件的方法，可以使得复杂组件渲染也能得到良好的体验。

直接上代码哈哈，主要用了requestAnimationFrame。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { ref } from 'vue'

export function useDefer(maxFrameCount = 1000) {
  const frameCount = ref(0)
  const refreshFrameCount = () => {
    requestAnimationFrame(() => {
      frameCount.value++
      if (frameCount.value < maxFrameCount) {
        refreshFrameCount()
      }
    })
  }
  refreshFrameCount()
  return function (showInFrameCount) {
    return frameCount.value >= showInFrameCount
  }
}

然后在Vue文件中：

1
2
3
4
5
6
7
8
9
10
11
<template>
  <el-menu v-for="(menu, index) in lotsOfMenus" :key="index">
    <NavSubMenu v-if="defer(index)" :menu="menu"></NavSubMenu>
  </el-menu>
</template>

<script setup>
import { useDefer } from '@/utils/useDefer.js'
const defer = useDefer()
......
</script>