下拉框数据量大卡顿性能优化方案

#关于下拉框数据太多渲染导致卡死问题vue3的性能优化方案#

手写的话我的思路是利用自定义指令监听下拉框的滚动事件，先渲染一部分如100条数据就不会卡死，然后用户滚动到底再push100条，直到渲染完所有数据，这样就不会出现因一次性渲染太多数据导致页面页面无响应假死状况出现，并考虑检索功能。

代码如下：

1.自定义指令：

//在mian.js用vue  const app = createApp(App)绑定自定义指令
app.directive('custom-scrollChange', {
   
   
      mounted(el, binding) {
   
   
        const handleScroll = () => {
   
   
          const {
   
    scrollTop, clientHeight, scrollHeight } = el;
          if (scrollTop + clientHeight >= scrollHeight - 5) {
   
   
            binding.value();
          }
        };

        el.addEventListener('scroll', handleScroll);