Vue3自定义递归组件，点击展开子级很慢，请问该怎么进行优化？

Question

由于业务需要，现有的开源ui组件库不满足交互需求，所以自己写了一个组件来满足。组件大概这个样子：

子组件名称ProjectPermissionItem.vue，代码如下：

<template>
  <ul class="m-custom-list">
    <li
      class="m-custom-item"
      v-for="item in permissions"
      :key="item.id"
    >
      <div class="custom-item-content">
        <div
          class="custom-item-content-l"
          @click="handleClick(item)"
        >
          <svg-icon
            v-if="!item.expaned && item.children.length"
            icon-class="expand-default"
            class="expand-icon"
          />
          <svg-icon
            v-if="item.expaned"
            icon-class="expand-active"
            class="expand-icon"
          />
          <span class="menu-name">{{item.name}}</span>
        </div>
        <div
          class="custom-item-content-r"
          v-if="!item.children.length"
        >
          <el-select
            v-model="item.type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in PERMISSIONMENUTYPS"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div
        v-if="item.children && item.children.length && item.expaned"
        class="item-childen"
      >
        <MyItem
          :permissions="item.children"
          v-bind="$attrs"
        ></MyItem>
      </div>
    </li>
  </ul>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { PERMISSIONMENUTYPS } from '@/constants'
export default defineComponent({
  name: 'MyItem',
  props: {
    permissions: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const handleClick = (item: any) => {
      emit('handleClick', item)
    }
    return {
      handleClick,
      PERMISSIONMENUTYPS,
    }
  },
})
</script>

父组件名称ProjectPermissionScopeTree.vue，代码如下：

<template>
  <div>
    <ProjectPermissionItem
      :permissions="mPermissions"
      v-bind="$attrs"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, watch } from 'vue'
import { PERMISSIONMENUTYPS } from '@/constants'
import ProjectPermissionItem from './ProjectPermissionItem.vue'
export default defineComponent({
  components: {
    ProjectPermissionItem,
  },
  props: {
    permissions: {
      type: Array,
      default: () => [],
    },
    checkedKeys: {
      type: Array,
      default: () => [],
    },
    isCheck: {
      type: Boolean,
      default: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit, expose }) {
    const mPermissions: any = ref(props.permissions)
    const handleClick = (item: any) => {
      item.expaned = !item.expaned
    }
    return {
      PERMISSIONMENUTYPS,
      mPermissions,
      handleClick,
    }
  },
})
</script>

当点击首页->快捷入口（该菜单下有几个子菜单），子菜单的展开特别慢。

想问下该怎么样进行优化处理。

Answer 1

暂时没有很好的想法。建议：

1. 先把第三方组件去掉，试下效果
2. 把剩下的代码复制到 sfc.vuejs.org，方便大家调试
3. 装上 Vue Devtools 试试
4. 抓一下 CPU 试试