场景题：Element UI 的穿梭组件在数据量大时变卡，怎么优化？

Element UI 的穿梭组件（el-transfer）在数据量大时可能会变得卡顿，主要是因为渲染大量 DOM 元素和频繁的数据更新导致的性能问题。以下是优化 el-transfer 组件的几种方法：

1. 分页加载数据

将数据分页加载，减少一次性渲染的数据量。

实现方式

使用分页控件（如 el-pagination）加载数据。
每次只加载当前页的数据，减少 DOM 元素数量。

示例代码

<template>
  <div>
    <el-transfer
      v-model="selectedData"
      :data="currentPageData"
      :titles="['Source', 'Target']"
      @change="handleChange"
    ></el-transfer>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 所有数据
      currentPageData: [], // 当前页数据
      selectedData: [], // 已选数据
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟加载所有数据
      this.allData = Array.from({ length: 1000 }, (_, i) => ({
        key: i,
        label: `Item ${i}`,
      }));
      this.total = this.allData.length;
      this.updatePageData();
    },
    updatePageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentPageData = this.allData.slice(start, end);
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.updatePageData();
    },
    handleChange(value, direction, movedKeys) {
      console.log('Selected:', value);
    },
  },
};
</script>

2. 虚拟列表

使用虚拟列表技术，只渲染可见区域的数据，减少 DOM 元素数量。

实现方式

使用第三方虚拟列表库（如 vue-virtual-scroller）。
自定义实现虚拟列表。

示例代码

<template>
  <div>
    <el-transfer
      v-model="selectedData"
      :data="visibleData"
      :titles="['Source', 'Target']"
      @change="handleChange"
    ></el-transfer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 所有数据
      visibleData: [], // 可见数据
      selectedData: [], // 已选数据
      startIndex: 0,
      endIndex: 20,
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟加载所有数据
      this.allData = Array.from({ length: 1000 }, (_, i) => ({
        key: i,
        label: `Item ${i}`,
      }));
      this.updateVisibleData();
    },
    updateVisibleData() {
      this.visibleData = this.allData.slice(this.startIndex, this.endIndex);
    },
    handleChange(value, direction, movedKeys) {
      console.log('Selected:', value);
    },
  },
};
</script>

3. 数据过滤

通过搜索或过滤功能，减少显示的数据量。

实现方式

在 el-transfer 中添加搜索框，动态过滤数据。
只显示符合条件的数据。

示例代码

<template>
  <div>
    <el-input v-model="searchText" placeholder="Search"></el-input>
    <el-transfer
      v-model="selectedData"
      :data="filteredData"
      :titles="['Source', 'Target']"
      @change="handleChange"
    ></el-transfer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 所有数据
      filteredData: [], // 过滤后的数据
      selectedData: [], // 已选数据
      searchText: '',
    };
  },
  created() {
    this.loadData();
  },
  watch: {
    searchText() {
      this.updateFilteredData();
    },
  },
  methods: {
    loadData() {
      // 模拟加载所有数据
      this.allData = Array.from({ length: 1000 }, (_, i) => ({
        key: i,
        label: `Item ${i}`,
      }));
      this.updateFilteredData();
    },
    updateFilteredData() {
      this.filteredData = this.allData.filter((item) =>
        item.label.includes(this.searchText)
      );
    },
    handleChange(value, direction, movedKeys) {
      console.log('Selected:', value);
    },
  },
};
</script>

4. 减少数据更新频率

优化数据更新逻辑，避免频繁更新导致的性能问题。

实现方式

使用 debounce 或 throttle 减少数据更新频率。
批量更新数据。

示例代码

import { debounce } from 'lodash';

methods: {
  handleChange: debounce(function (value, direction, movedKeys) {
    console.log('Selected:', value);
  }, 300),
},

5. 使用 Web Worker

将数据处理逻辑放到 Web Worker 中，避免阻塞主线程。

实现方式

使用 Web Worker 处理数据过滤、排序等操作。
主线程只负责渲染。

示例代码

// worker.js
self.onmessage = function (event) {
  const { data, searchText } = event.data;
  const filteredData = data.filter((item) => item.label.includes(searchText));
  self.postMessage(filteredData);
};

// 主线程
const worker = new Worker('worker.js');
worker.onmessage = function (event) {
  this.filteredData = event.data;
};
worker.postMessage({ data: this.allData, searchText: this.searchText });

总结

方法	适用场景	优点	缺点
分页加载数据	数据量非常大，需要分批加载	减少一次性渲染的数据量	需要额外实现分页逻辑
虚拟列表	数据量较大，需要优化渲染性能	只渲染可见区域的数据	实现复杂度较高
数据过滤	需要根据条件动态显示数据	减少显示的数据量	需要额外实现过滤逻辑
减少数据更新频率	数据更新频繁导致性能问题	减少更新频率，提升性能	可能影响实时性
使用 Web Worker	数据处理逻辑复杂，需要避免阻塞主线程	提升主线程性能	实现复杂度较高

根据具体场景选择合适的优化方法，通常推荐结合分页加载和数据过滤来提升性能。

THE END