useRenderDefer

useRenderDefer 渲染优化函数

TIP

为什么会有这个 hook?比如某个页面引用了很多组件（例如下方加载了 10 个 ListOne 组件，每个 ListOne 组件渲染了 100 个 item），页面加载白屏甚至浏览器崩溃，所以就需要控制组件加载的先后顺序。

实现代码

<!-- List.vue -->
<template>
  <div class="container-render">
    <div v-for="n in 10" :key="n">
      <ListOne v-if="deferRender(n)" />
    </div>
    <!-- <ListOne /> -->
  </div>
</template>
<script setup lang="tsx">
import ListOne from './ListOne.vue';
import { useRenderDefer } from '@aplus-frontend/hooks';
const deferRender = useRenderDefer(1000);
</script>
<style lang="less">
.container-render {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
  .data-item {
    height: 200px;
  }
}
</style>

<!-- LisOne.vue -->
<template>
  <List item-layout="horizontal" :data-source="data">
    <template #renderItem="{ item }">
      <List.Item>
        <List.Item.Meta
          :description="'Aplus UI,a design language for Aplus team'"
        >
          <template #title>
            {{ item.title }}
          </template>
          <template #avatar>
            <Avatar src="https://joeschmoe.io/api/v1/random" />
          </template>
        </List.Item.Meta>
      </List.Item>
    </template>
  </List>
</template>
<script setup>
import { List, Avatar } from '@aplus-frontend/antdv';
const data = [];

for (let i = 0; i < 100; i++) {
  data.push({
    title: `Aplus Title ${i + 1}`
  });
}
</script>

useRenderDefer API

属性	描述	类型	默认值
maxCount	最大渲染针数，一般和你要渲染的组件个数相同，默认值为	number	100

deferRender API

属性	描述	类型	默认值
n	当前渲染针数，默认是从第 0 针开始	number	0

Type Declarations

function useRenderDefer(maxCount?: number): deferRender
function deferRender(n: number): boolean