SaaS 平台开发要点

如何在 SaaS 平台的前端开发中，编写高性能、高质量且高度通用化的 Vue 组件

一、组件设计原则

1. 单一职责原则：每个组件只负责一个核心功能
2. 受控/非受控模式：同时支持 v-model 和自主状态管理
3. 组合式 API：使用 Composition API 提升逻辑复用性
4. 可访问性：遵循 WAI-ARIA 规范
5. TypeScript 强类型：使用泛型提升类型安全

二、性能优化策略

1. 虚拟滚动：处理大数据量渲染
2. 按需加载：动态导入组件资源
3. 渲染优化：v-once/v-memo 的使用
4. 事件防抖：高频操作优化
5. 内存管理：及时销毁无用监听器

三、通用组件实现方案

案例：智能数据表格组件（SmartDataTable）

<template>
  <div class="virtual-scroll-container" @scroll.passive="handleScroll">
    <div :style="scrollContentStyle">
      <table>
        <thead>
          <tr>
            <th v-for="col in columns" :key="col.key" @click="handleSort(col)">
              <slot :name="`header-${col.key}`" :column="col">
                {
  { col.title }}
                <span v-if="sortState.key === col.key">
                  {
  { sortState.order === 'asc' ? '↑' : '↓' }}
                </span>
              </slot>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in visibleData" :key="row.id">
            <td v-for="col in columns" :key="col.key">
              <slot :name="`cell-${col.key}`" :row="row">
                {
  { formatCell(row[col.key], col.formatter) }}
              </slot>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-if="loading" class="loading-indicator">
        <progress-spinner />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'
import { debounce } from 'lodash-es'

interface TableColumn<T = any> {
  key: string
  title: string
  width?: number
  sortable?: boolean
  formatter?: (value: any) => string
}

interface Props<T> {
  columns: TableColumn<T>[]
  dataSource: T[]
  rowHeight?: number
  bufferSize?: number
  sortMethod?: (data: T[]) => T[]
}

const props = withDefaults(defineProps<Props<any>>(), {
  rowHeight: 48,
  bufferSize: 10
})

const emit = defineEmits(['sort-change', 'scroll-end'])

// 响应式状态管理
const scrollTop = ref(0)
const sortState = ref<{ key: string; order: 'asc' | 'desc' } | null>(null)
const loading = ref(false)

// 计算可见数据范围
c