Vue3分页组件开发实战与优化技巧-代码聚汇网

Vue3分页组件开发实战与优化技巧

于欣烈·2026-08-25·阅读 23 GEO检测（免费）

Vue3前端分页组件封装

|难度：普通|阅读约 19 分钟

1. 项目概述：Vue3分页组件开发实战

最近在重构公司后台管理系统时，发现多个模块都需要实现前端分页功能。作为Vue3的深度使用者，我决定封装一个高复用性的分页组件。这个组件需要满足几个核心需求：支持客户端分页、适配不同数据量场景、提供灵活的外观定制能力。经过两周的迭代优化，最终实现的组件不仅在本项目中稳定运行，还被抽离成独立npm包供其他团队使用。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术选型与设计思路

2.1 为什么选择前端分页方案

在数据量适中（通常小于1万条）的场景下，前端分页相比后端分页有三大优势：

减少网络请求次数 - 只需一次性加载全部数据
实现瞬时响应 - 切换页码无需等待接口返回
降低服务器压力 - 计算逻辑转移到客户端

但需要注意：当数据量超过5万条时，应考虑改用虚拟滚动或后端分页，否则会导致内存占用过高。

2.2 核心功能设计

组件需要实现以下核心功能点：

基础分页导航（上一页/下一页/页码跳转）
每页条数选择器
总条数显示
自定义样式插槽
分页数据切片计算

3. 组件实现详解

3.1 项目初始化与依赖安装

首先创建Vue3项目（如果尚未存在）：

bash复制npm init vue@latest pagination-demo
cd pagination-demo
npm install

3.2 组件核心代码实现

创建src/components/Pagination.vue：

vue复制<script setup>
import { computed } from 'vue'

const props = defineProps({
  totalItems: { type: Number, required: true },
  itemsPerPage: { type: Number, default: 10 },
  currentPage: { type: Number, default: 1 },
  maxVisiblePages: { type: Number, default: 5 }
})

const emit = defineEmits(['page-change'])

const totalPages = computed(() => 
  Math.ceil(props.totalItems / props.itemsPerPage)
)

const visiblePages = computed(() => {
  const range = []
  const half = Math.floor(props.maxVisiblePages / 2)
  let start = Math.max(1, props.currentPage - half)
  let end = Math.min(totalPages.value, start + props.maxVisiblePages - 1)
  
  if (end - start + 1 < props.maxVisiblePages) {
    start = Math.max(1, end - props.maxVisiblePages + 1)
  }
  
  for (let i = start; i <= end; i++) {
    range.push(i)
  }
  
  return range
})

function goToPage(page) {
  if (page < 1 || page > totalPages.value || page === props.currentPage) return
  emit('page-change', page)
}
</script>

3.3 模板与样式实现

vue复制<template>
  <div class="pagination-container">
    <div class="pagination-info">
      共 {{ totalItems }} 条，每页 {{ itemsPerPage }} 条
    </div>
    
    <div class="pagination-controls">
      <button 
        @click="goToPage(currentPage - 1)"
        :disabled="currentPage === 1"
      >
        上一页
      </button>
      
      <button
        v-for="page in visiblePages"
        :key="page"
        @click="goToPage(page)"
        :class="{ active: page === currentPage }"
      >
        {{ page }}
      </button>
      
      <button 
        @click="goToPage(currentPage + 1)"
        :disabled="currentPage === totalPages"
      >
        下一页
      </button>
      
      <select v-model="itemsPerPage" @change="goToPage(1)">
        <option value="10">10条/页</option>
        <option value="20">20条/页</option>
        <option value="50">50条/页</option>
      </select>
    </div>
  </div>
</template>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.pagination-controls button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: white;
}

.pagination-controls button.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}

.pagination-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

select {
  margin-left: 10px;
  padding: 5px;
}
</style>

4. 组件使用与数据分片

4.1 在父组件中使用

vue复制<script setup>
import { ref, computed } from 'vue'
import Pagination from './components/Pagination.vue'

const allData = ref([]) // 从API获取的原始数据
const currentPage = ref(1)
const itemsPerPage = ref(10)

// 模拟数据获取
async function fetchData() {
  const res = await fetch('https://api.example.com/data')
  allData.value = await res.json()
}

// 计算当前页数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage.value
  const end = start + itemsPerPage.value
  return allData.value.slice(start, end)
})

function handlePageChange(page) {
  currentPage.value = page
}

fetchData()
</script>

<template>
  <table>
    <!-- 渲染currentPageData -->
  </table>
  
  <Pagination
    :total-items="allData.length"
    :items-per-page="itemsPerPage"
    :current-page="currentPage"
    @page-change="handlePageChange"
  />
</template>

4.2 性能优化技巧

对于大数据量场景（1万~5万条），可以采用以下优化方案：

Web Worker分片计算：将数据切片计算放到Worker线程

javascript复制// worker.js
self.onmessage = function(e) {
  const { allData, page, pageSize } = e.data
  const start = (page - 1) * pageSize
  const end = start + pageSize
  const pageData = allData.slice(start, end)
  postMessage(pageData)
}

虚拟滚动结合分页：只渲染可视区域数据
内存优化：使用JSON.parse(JSON.stringify())深拷贝大数据时改用结构化克隆

5. 高级功能扩展

5.1 支持TypeScript类型

为组件添加TypeScript支持：

typescript复制interface PaginationProps {
  totalItems: number
  itemsPerPage?: number
  currentPage?: number
  maxVisiblePages?: number
}

interface PaginationEmits {
  (e: 'page-change', page: number): void
}

5.2 自定义插槽实现

增加样式定制能力：

vue复制<template>
  <div class="pagination-container">
    <slot name="prefix" :total="totalItems" :current="currentPage" />
    
    <!-- 原有分页控件 -->
    
    <slot name="suffix" :total="totalItems" :current="currentPage" />
  </div>
</template>

使用示例：

vue复制<Pagination>
  <template #prefix="{ total }">
    <span class="custom-text">共 {{ total }} 条记录</span>
  </template>
</Pagination>

5.3 响应式断点适配

通过CSS媒体查询适配移动端：

css复制@media (max-width: 768px) {
  .pagination-controls {
    flex-wrap: wrap;
  }
  
  .pagination-controls button {
    margin: 2px;
    padding: 3px 6px;
  }
  
  select {
    margin-top: 5px;
    width: 100%;
  }
}

6. 常见问题与解决方案

6.1 分页跳转失效问题

现象：点击页码后视图未更新
排查步骤：

检查父组件是否正确处理@page-change事件
确认currentPage是响应式变量（使用ref/reactive）
检查计算属性currentPageData是否依赖了currentPage

6.2 大数据量性能问题

优化方案：

使用requestIdleCallback分批次处理数据

javascript复制function processLargeData(data) {
  const chunks = []
  const chunkSize = 1000
  
  function processChunk(start) {
    const end = Math.min(start + chunkSize, data.length)
    chunks.push(data.slice(start, end))
    
    if (end < data.length) {
      requestIdleCallback(() => processChunk(end))
    }
  }
  
  processChunk(0)
  return chunks
}

考虑使用WeakMap缓存已处理数据

6.3 样式冲突问题

解决方案：

使用scoped样式
添加组件命名空间前缀
提供CSS变量供外部覆盖

css复制.pagination-container {
  --pagination-active-bg: #42b983;
  --pagination-active-color: white;
}

.pagination-controls button.active {
  background: var(--pagination-active-bg);
  color: var(--pagination-active-color);
}

7. 组件测试方案

7.1 单元测试示例（使用Vitest）

javascript复制import { render, fireEvent } from '@testing-library/vue'
import Pagination from './Pagination.vue'

test('emits page-change event when clicking page', async () => {
  const { getByText, emitted } = render(Pagination, {
    props: {
      totalItems: 100,
      currentPage: 1
    }
  })
  
  await fireEvent.click(getByText('2'))
  expect(emitted()['page-change'][0]).toEqual([2])
})

test('disables prev button on first page', () => {
  const { getByText } = render(Pagination, {
    props: {
      totalItems: 100,
      currentPage: 1
    }
  })
  
  expect(getByText('上一页').disabled).toBe(true)
})

7.2 E2E测试（使用Cypress）

javascript复制describe('Pagination', () => {
  it('should navigate between pages', () => {
    cy.visit('/')
    cy.get('.pagination-controls').contains('2').click()
    cy.get('table tr').should('have.length', 10) // 假设每页10条
  })
})

8. 项目部署与发布

8.1 打包为独立组件库

创建vite.config.js：

javascript复制import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/components/Pagination.vue',
      name: 'Vue3Pagination',
      fileName: 'vue3-pagination'
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

打包命令：

bash复制vite build

8.2 发布到npm

准备package.json：

json复制{
  "name": "vue3-pagination",
  "version": "1.0.0",
  "main": "dist/vue3-pagination.umd.js",
  "module": "dist/vue3-pagination.es.js",
  "files": ["dist"],
  "peerDependencies": {
    "vue": "^3.0.0"
  }
}

发布命令：

bash复制npm login
npm publish

9. 实际应用中的经验总结

在三个月的生产环境使用中，这个分页组件经历了多次迭代优化。以下是几个关键经验：

内存泄漏预防：在组件卸载时清除所有定时器和事件监听器

javascript复制onUnmounted(() => {
  // 清理操作
})

无障碍访问优化：添加ARIA标签

vue复制<button 
  aria-label={`前往第${page}页`}
  @click="goToPage(page)"
>
  {{ page }}
</button>

边界情况处理：当totalItems为0时显示友好提示

vue复制<div v-if="totalItems === 0" class="no-data">
  暂无数据
</div>

分页策略选择：根据数据量自动切换分页方式

javascript复制const useFrontendPagination = computed(() => {
  return allData.value.length < 50000
})