Vue3 自定义指令对比：3种 el-select 滚动加载方案性能与实现差异

Vue3 自定义指令对比：3种 el-select 滚动加载方案性能与实现差异

当面对海量数据时，Element Plus 的 el-select 组件原生不支持分页加载，直接渲染全部数据会导致页面卡顿甚至崩溃。本文将深入分析三种主流滚动加载方案的实现原理、性能表现和适用场景，帮助技术决策者选择最适合项目的解决方案。

1. 方案概览与技术选型核心指标

在数据量超过 1000 条时，传统的 el-select 渲染方式会出现明显性能问题。我们主要评估以下三种方案：

• 自定义指令方案：通过监听滚动事件动态加载数据
• 组合式函数方案：利用 Vue3 的 Composition API 封装复用逻辑
• 虚拟滚动方案：采用第三方库实现高效渲染

先看三种方案的核心对比指标：

实际选择时需要结合项目数据量级和团队技术栈考虑。对于常规后台系统，1万条数据以内组合式函数是最佳平衡点。

2. 自定义指令方案深度解析

这是最接近原生实现的方案，适合需要精细控制滚动行为的场景。核心实现分为三个关键步骤：

2.1 指令注册与DOM监听

// directives/selectLoadMore.ts export default { mounted(el: HTMLElement, binding: DirectiveBinding) { const selectWrap = el.querySelector( '.el-select-dropdown .el-select-dropdown__wrap' ) as HTMLElement const loadMore = () => { const { scrollTop, scrollHeight, clientHeight } = selectWrap if (scrollHeight - scrollTop <= clientHeight + 5) { binding.value?.() } } selectWrap?.addEventListener('scroll', loadMore) el._scrollListener = loadMore }, unmounted(el: HTMLElement) { const selectWrap = el.querySelector( '.el-select-dropdown .el-select-dropdown__wrap' ) as HTMLElement selectWrap?.removeEventListener('scroll', el._scrollListener) } }

2.2 组件中的使用示例

<template> <el-select v-select-loadmore="loadMore" popper-class="custom-select" v-model="selectedValue" filterable remote :remote-method="remoteSearch" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> </el-select> </template> <script setup> const options = ref([]) const loading = ref(false) const page = ref(1) const loadMore = async () => { if (loading.value) return loading.value = true page.value++ await fetchData() loading.value = false } </script>

2.3 性能优化技巧

• 防抖处理：避免滚动事件频繁触发
• 加载状态锁：防止重复请求
• DOM回收：及时移除事件监听
• 精准计算：添加 5px 缓冲区域减少误触发

// 优化后的滚动判断 const shouldLoad = () => { const { scrollTop, scrollHeight, clientHeight } = selectWrap return scrollHeight - scrollTop <= clientHeight + 5 && !loading.value && hasMore.value }

3. 组合式函数方案实现

Vue3 的 Composition API 让我们可以更优雅地封装滚动加载逻辑。以下是典型实现：

3.1 创建 useInfiniteScroll 组合式函数

// composables/useInfiniteScroll.ts export function useInfiniteScroll(options: { target: Ref<HTMLElement | null> onLoadMore: () => Promise<void> threshold?: number }) { const isLoading = ref(false) const observer = ref<IntersectionObserver>() onMounted(() => { if (!options.target.value) return observer.value = new IntersectionObserver( (entries) => { const [entry] = entries if (entry.isIntersecting && !isLoading.value) { isLoading.value = true options.onLoadMore().finally(() => { isLoading.value = false }) } }, { threshold: options.threshold || 0.1 } ) observer.value.observe(options.target.value) }) onUnmounted(() => { observer.value?.disconnect() }) return { isLoading } }

3.2 在组件中的应用

<template> <el-select v-model="selectedValue" popper-class="infinite-select" filterable remote :remote-method="handleSearch" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> <div ref="loader" class="loading-indicator"> <el-icon v-if="isLoading" :size="16"><Loading /></el-icon> </div> </el-select> </template> <script setup> const loader = ref(null) const { isLoading } = useInfiniteScroll({ target: loader, onLoadMore: fetchNextPage }) </script>

3.3 方案优势分析

1. 逻辑复用：一套代码多处使用
2. 性能更优：采用 IntersectionObserver API
3. 维护简单：业务组件更干净
4. 扩展性强：轻松添加新功能

// 扩展后的配置项 interface InfiniteScrollOptions { target: Ref<HTMLElement | null> onLoadMore: () => Promise<void> threshold?: number immediate?: boolean maxRetry?: number }

4. 虚拟滚动方案专业实现

当数据量超过 1 万条时，前两种方案仍会有性能压力。这时需要引入虚拟滚动技术。

4.1 使用 vue-virtual-scroller

npm install vue-virtual-scroller@next

4.2 改造 el-select 的实现

<template> <el-select v-model="selectedValue" popper-class="virtual-select" @visible-change="initVirtualScroll" > <RecycleScroller v-if="dropdownVisible" class="scroller" :items="virtualOptions" :item-size="32" key-field="value" > <template #default="{ item }"> <el-option :label="item.label" :value="item.value" /> </template> </RecycleScroller> </el-select> </template> <script setup> import { RecycleScroller } from 'vue-virtual-scroller' const dropdownVisible = ref(false) const virtualOptions = ref([]) const initVirtualScroll = (visible) => { dropdownVisible.value = visible if (visible) { // 初始化虚拟滚动数据 } } </script> <style> .virtual-select { .el-select-dropdown__list { padding: 0 !important; } .scroller { height: 300px; } } </style>

4.3 性能对比测试

使用 10 万条数据进行压力测试：

5. 终极选型建议

根据项目实际需求选择方案：

• 小型项目（<1k数据）：原生 el-select + 分页
• 中大型项目（1k-10k）：组合式函数方案
• 超大数据量（10k+）：虚拟滚动方案
• 需要最大灵活性：自定义指令方案

// 方案选择决策树 function selectSolution(dataSize, needCustom) { if (dataSize > 10000) return 'virtual-scroll' if (needCustom) return 'directive' return 'composable' }

三种方案各有适用场景，在实际项目中我曾遇到一个需要同时支持 5 万条数据和复杂自定义样式的需求，最终采用虚拟滚动为主、自定义指令为辅的混合方案，既保证了性能又满足了产品需求。