从 Select 到 SelectV2：一次重构优化的历程

探索 Element Plus 中 Select 和 SelectV2 下拉选择器的差异和优化

真实 Dom 与虚拟选择器

Element Plus 提供了两种下拉选择器组件：Select 和 SelectV2。它们的工作原理存在根本差异。Select 使用真实 Dom 元素在页面中创建下拉选择器，而 SelectV2 采用虚拟选择器，在内存中创建虚拟 Dom 元素。虚拟选择器优势在于减少实际 Dom 元素的数量，从而提高页面性能。

功能对比：组件异同

虽然都是下拉选择器，Select 和 SelectV2 在功能上略有差异。Select 提供更丰富的功能，包括多选、远程搜索等。SelectV2 目前仅支持单选和本地搜索。

性能优化：提升组件效率

在重构优化的过程中，我发现 Select 组件存在性能问题。主要体现在：

• 过度 Dom 操作：每次打开或关闭下拉列表都会进行大量 Dom 操作，消耗大量性能资源。
• 过多事件监听器：下拉列表打开时为每个选项添加事件监听器，消耗大量性能资源。
• 高渲染开销：每次打开下拉列表都会重新渲染整个列表，消耗大量性能资源。

针对这些问题，我进行了以下优化：

• 减少 Dom 操作：使用虚拟 Dom 实现下拉列表，大幅减少实际 Dom 操作。
• 减少事件监听器：采用事件委托方式为选项添加事件监听器，降低事件监听数量。
• 优化渲染开销：使用惰性渲染方式，仅在需要时渲染下拉列表，减少渲染开销。

交互设计：提升用户体验

除了性能优化，我还对 Select 组件的交互设计进行了改进：

• 优化下拉列表显示位置：将下拉列表显示在输入框下方，便于用户查看内容。
• 优化滚动条：添加滚动条，方便用户滚动查看下拉列表内容。
• 优化选项样式：优化下拉列表选项的样式，使其更加美观易读。

结论

通过这次重构优化，Select 和 SelectV2 组件的性能和交互体验得到了显著提升。我深入理解了组件的内部实现，相信这些经验将对我的前端开发工作产生积极影响。

常见问题解答

Q1：Select 和 SelectV2 的主要区别是什么？
A1：Select 使用真实 Dom 元素，而 SelectV2 使用虚拟选择器，性能更佳。

Q2：为什么 SelectV2 不支持多选？
A2：SelectV2 的设计目的是轻量高效，不支持多选以减少复杂度。

Q3：如何使用虚拟选择器？
A3：使用 VirtualList 组件创建虚拟选择器，它可以在内存中创建虚拟 Dom 元素。

Q4：Select 组件性能优化的代码示例是什么？
A4：

import { ref, nextTick } from 'vue';
import VirtualList from '@element-plus/components/virtual-list';

export default {
  setup() {
    const options = ref([]);
    const virtualListRef = ref(null);

    // 惰性渲染
    nextTick(() => {
      if (virtualListRef.value) {
        virtualListRef.value.update();
      }
    });

    return { options, virtualListRef };
  },
};

Q5：SelectV2 交互设计优化的代码示例是什么？
A5：

import { ref } from 'vue';

export default {
  setup() {
    const dropdownVisible = ref(false);

    // 优化下拉列表显示位置
    const style = {
      position: 'absolute',
      left: 0,
      bottom: 0,
    };

    return { dropdownVisible, style };
  },
};