文章目录 一、核心迁移思路 二、分步实现（基础迁移） 1. 组件骨架搭建（单文件组件格式） 2. 核心功能迁移映射（jQuery → Vue 3） 三、性能优化关键措施 1. 渲染优化（减少 DOM 操作） 2. 数据处理优化 3. 其他优化 四、迁移注意事项 一、核心迁移思路 结构重构 ：将 jQuery DOM 操作转为 Vue 3 模板语法，用v-for渲染表格行 / 列，v-bind绑定属性，v-on绑定事件（替代$(el).on()）。状态管理 ：把表格数据、分页信息、筛选条件等抽为 Vue 响应式数据（ref/reactive），替代 jQuery 全局变量 / 数据缓存。方法封装 ：将表格初始化、数据刷新、排序筛选等逻辑封装为组件方法，通过 Vue 实例调用（替代 jQuery 插件链式调用）。二、分步实现（基础迁移） 1. 组件骨架搭建（单文件组件格式） <template> <div class="table-container"> <!-- 筛选栏 --> <div class="table-filter"> <input v-model="searchKey" @input="handleSearch" placeholder="搜索..." /> </div> <!-- 表格主体 --> <table class="vue-table"> <thead> <tr> <th v-for="col in columns" :key="col.key" @click="handleSort(col.key)"> {{ col.label }} <span v-if="sortKey === col.key">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span> </th> </tr> </thead> <tbody> <tr v-for="(item, index) in tableData" :key="index"> <td v-for="col in columns" :key="col.key">{{ item[col.key] }}</td> </tr> </tbody> </table> <!-- 分页 --> <div class="table-pagination"> <button @click="prevPage" :disabled="currentPage === 1">上一页</button> <span>{{ currentPage }}/{{ totalPages }}</span> <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button> </div> </div> </template> <script setup> import { ref, computed } from 'vue'; // 接收父组件传参（替代jQuery插件配置项） const props = defineProps({ columns: { type: Array, required: true, default: () => [] // 格式：[{ key: 'id', label: 'ID' }, ...] }, dataSource: { type: Array, required: true, default: () => [] }, pageSize: { type: Number, default: 10 } }); // 响应式状态（替代jQuery数据缓存） const searchKey = ref(''); const sortKey = ref(''); const sortOrder = ref('asc'); // asc/desc const currentPage = ref(1); // 计算属性（筛选+排序+分页后的数据） const filteredData = computed(() => { return props.dataSource.filter(item => Object.values(item).some(val => val.toString().includes(searchKey.value)) ).sort((a, b) => { if (!sortKey.value) return 0; return sortOrder.value === 'asc' ? a[sortKey.value] - b[sortKey.value] : b[sortKey.value] - a[sortKey.value]; }); }); // 分页相关计算 const totalPages = computed(() => Math.ceil(filteredData.value.length / props.pageSize)); const tableData = computed(() => { const start = (currentPage.value - 1) * props.pageSize; return filteredData.value.slice(start, start + props.pageSize); }); // 方法封装（替代jQuery插件方法） const handleSearch = () => { currentPage.value = 1; // 搜索后重置页码 }; const handleSort = (key) => { if (sortKey.value === key) { sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'; } else { sortKey.value = key; sortOrder.value = 'asc'; } }; const prevPage = () => currentPage.value--; const nextPage = () => currentPage.value++; </script> <style scoped> /* 保留原jQuery组件样式，去除兼容前缀（如-webkit-），优化选择器 */ .table-container { width: 100%; overflow-x: auto; } .vue-table { width: 100%; border-collapse: collapse; } .vue-table th, .vue-table td { padding: 8px; border: 1px solid #eee; text-align: left; } .vue-table th { cursor: pointer; background: #f5f5f5; } .table-filter { margin-bottom: 16px; } .table-pagination { margin-top: 16px; text-align: right; } </style>2. 核心功能迁移映射（jQuery → Vue 3） jQuery 实现方式 Vue 3 替代方案 $(el).html()渲染表格 v-for模板渲染 + 响应式数据驱动 $(el).on(‘click’, 排序) @click事件绑定 + 响应式sortKey/sortOrder 全局变量存储分页信息 ref定义currentPage/pageSize $.ajax请求数据后更新 DOM 父组件传参dataSource+ 计算属性自动响应 $(input).val()获取筛选值 v-model绑定searchKey
三、性能优化关键措施 1. 渲染优化（减少 DOM 操作） 虚拟列表 ：大数据量（>1000 条）时，用vue-virtual-scroller只渲染可视区域行，避免一次性渲染所有 DOM：<template> <virtual-scroller :items="tableData" :item-size="40" class="table-body"> <template #default="{ item }"> <tr> <td v-for="col in columns" :key="col.key">{{ item[col.key] }}</td> </tr> </template> </virtual-scroller> </template> <script setup> import { VirtualScroller } from 'vue-virtual-scroller'; import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; </script>避免不必要渲染 ：表格行用v-memo="[item.id]"缓存，仅当数据变化时重新渲染。2. 数据处理优化 防抖搜索 ：避免输入时频繁筛选，给搜索加防抖（延迟 300ms）：import { debounce} from 'lodash' ; // 或自定义防抖函数 const handleSearch= debounce ( ( ) => { currentPage. value= 1 ; } , 300 ) ; 分页逻辑优化 ：大数据量时，改为后端分页（通过currentPage和pageSize请求接口），前端仅渲染当前页数据。3. 其他优化 样式优化 ：去除内联样式，用scoped样式隔离，避免样式冲突；使用 CSS 变量简化主题配置。事件优化 ：表头排序事件用event.stopPropagation()阻止冒泡，避免不必要的事件触发。按需加载 ：如果表格包含导出、打印等附加功能，用defineAsyncComponent按需加载对应模块。四、迁移注意事项 jQuery 依赖清理 ：移除代码中$、jQuery相关调用，若需操作 DOM，用 Vue 3 的ref+el.value（谨慎使用，优先数据驱动）。兼容性处理 ：Vue 3 不支持 IE 浏览器，若需兼容，可使用Vue 2+@vue/composition-api迁移，或添加polyfill。测试验证 ：迁移后需验证核心功能（渲染、排序、筛选、分页），并测试大数据量下的性能（对比原 jQuery 组件的渲染速度、内存占用）。
