Vue 3 性能优化实战指南：从响应式原理到生产级优化

// utils/reactivity-demo.ts
import { reactive, ref, computed, watch, shallowRef, shallowReactive } from 'vue'

// 🔴 避免：深度响应式大对象
const heavyData = reactive({
  users: new Array(10000).fill(null).map((_, i) => ({
    id: i,
    name: `User ${i}`,
    profile: {
      avatar: `/avatar/${i}.jpg`,
      settings: {
        theme: 'light',
        notifications: true,
        privacy: {
          showEmail: false,
          showPhone: true
        }
      }
    }
  }))
})

// ✅ 优化：合理使用浅层响应式
const optimizedData = shallowReactive({
  users: [], // 只监听数组引用变化
  currentUser: ref(null),
  filters: reactive({
    search: '',
    category: 'all'
  })
})

// ✅ 按需深度响应式
function createReactiveUser(userData: any) {
  return reactive({
    ...userData,
    // 只对需要响应式的字段使用深度监听
    profile: shallowReactive(userData.profile)
  })
}

// utils/performance-monitor.ts
interface ReactiveStats {
  trackCount: number
  triggerCount: number
  computedCount: number
  watcherCount: number
}

class ReactivityMonitor {
  private stats: ReactiveStats = {
    trackCount: 0,
    triggerCount: 0,
    computedCount: 0,
    watcherCount: 0
  }

  // 监控响应式访问
  trackAccess(target: any, key: string) {
    this.stats.trackCount++
    if (import.meta.env.DEV) {
      console.log(`📊 Reactive access: ${target.constructor.name}.${key}`)
    }
  }

  // 监控响应式更新
  trackMutation(target: any, key: string, newValue: any) {
    this.stats.triggerCount++
    if (import.meta.env.DEV) {
      console.log(`🔄 Reactive update: ${target.constructor.name}.${key} = ${newValue}`)
    }
  }

  // 获取性能统计
  getStats(): ReactiveStats {
    return { ...this.stats }
  }

  // 重置统计
  reset() {
    this.stats = {
      trackCount: 0,
      triggerCount: 0,
      computedCount: 0,
      watcherCount: 0
    }
  }
}

export const reactivityMonitor = new ReactivityMonitor()

<!-- components/OptimizedUserList.vue -->
<script setup lang="ts">
import { ref, computed, watch, shallowRef, triggerRef } from 'vue'

interface User {
  id: number
  name: string
  email: string
  lastActive: Date
}

const users = shallowRef<User[]>([])
const searchQuery = ref('')
const sortField = ref<keyof User>('name')

// ✅ 优化：使用 computed 缓存复杂计算
const filteredUsers = computed(() => {
  const query = searchQuery.value.toLowerCase()
  if (!query) return users.value
  
  return users.value.filter(user => 
    user.name.toLowerCase().includes(query) ||
    user.email.toLowerCase().includes(query)
  )
})

// ✅ 优化：避免在 computed 中创建新对象
const sortedUsers = computed(() => {
  const field = sortField.value
  return [...filteredUsers.value].sort((a, b) => {
    if (a[field] < b[field]) return -1
    if (a[field] > b[field]) return 1
    return 0
  })
})

// ✅ 优化：使用 watchEffect 自动收集依赖
watchEffect(() => {
  // 只有当 searchQuery 或 sortField 变化时才触发
  if (searchQuery.value || sortField.value) {
    console.log('Filter or sort changed, updating display')
  }
})

// ✅ 优化：批量更新使用 shallowRef + triggerRef
const updateUsers = (newUsers: User[]) => {
  users.value = newUsers
  triggerRef(users) // 手动触发更新
}

// 🔴 避免：在 watch 中进行昂贵计算
// watch(users, (newUsers) => {
//   // 昂贵的同步计算
//   const processed = newUsers.map(user => ({
//     ...user,
//     processed: heavyComputation(user)
//   }))
// })

// ✅ 优化：异步处理或使用 computed
const processedUsers = computed(() => {
  return users.value.map(user => ({
    ...user,
    displayName: user.name.toUpperCase(),
    isRecent: isRecentlyActive(user.lastActive)
  }))
})

function isRecentlyActive(date: Date): boolean {
  return Date.now() - date.getTime() < 24 * 60 * 60 * 1000
}
</script>

<template>
  <div class="user-list">
    <div class="controls">
      <input v-model="searchQuery" placeholder="搜索用户..." />
      <select v-model="sortField">
        <option value="name">按姓名排序</option>
        <option value="email">按邮箱排序</option>
        <option value="lastActive">按活跃时间排序</option>
      </select>
    </div>

    <div class="user-grid">
      <div 
        v-for="user in sortedUsers" 
        :key="user.id"
        class="user-card"
      >
        <h3>{{ user.name }}</h3>
        <p>{{ user.email }}</p>
        <span :class="{ recent: isRecentlyActive(user.lastActive) }">
          {{ user.lastActive.toLocaleDateString() }}
        </span>
      </div>
    </div>
  </div>
</template>

<!-- components/VirtualList.vue -->
<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

interface VirtualListProps {
  items: any[]
  itemHeight: number
  containerHeight: number
  buffer?: number
}

const props = withDefaults(defineProps<VirtualListProps>(), {
  buffer: 5
})

const containerRef = ref<HTMLElement>()
const scrollTop = ref(0)

// 计算可见范围
const visibleRange = computed(() => {
  const start = Math.floor(scrollTop.value / props.itemHeight)
  const end = Math.min(
    start + Math.ceil(props.containerHeight / props.itemHeight),
    props.items.length
  )
  
  return {
    start: Math.max(0, start - props.buffer),
    end: Math.min(props.items.length, end + props.buffer)
  }
})

// 可见项目
const visibleItems = computed(() => {
  const { start, end } = visibleRange.value
  return props.items.slice(start, end).map((item, index) => ({
    item,
    index: start + index
  }))
})

// 样式计算
const listStyle = computed(() => ({
  height: `${props.items.length * props.itemHeight}px`,
  position: 'relative'
}))

const getItemStyle = (index: number) => ({
  position: 'absolute',
  top: `${index * props.itemHeight}px`,
  height: `${props.itemHeight}px`,
  width: '100%'
})

// 滚动处理
const handleScroll = (event: Event) => {
  const target = event.target as HTMLElement
  scrollTop.value = target.scrollTop
}

onMounted(() => {
  containerRef.value?.addEventListener('scroll', handleScroll, { passive: true })
})

onUnmounted(() => {
  containerRef.value?.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div 
    ref="containerRef"
    class="virtual-list-container"
    :style="{ height: `${containerHeight}px`, overflow: 'auto' }"
  >
    <div class="virtual-list" :style="listStyle">
      <div
        v-for="{ item, index } in visibleItems"
        :key="item.id || index"
        class="virtual-item"
        :style="getItemStyle(index)"
      >
        <slot :item="item" :index="index" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.virtual-list-container {
  overflow-y: auto;
}

.virtual-item {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
}
</style>

// utils/lazy-loading.ts
import { defineAsyncComponent, type AsyncComponentLoader } from 'vue'

interface LazyComponentOptions {
  loader: AsyncComponentLoader
  loadingComponent?: any
  errorComponent?: any
  delay?: number
  timeout?: number
  retries?: number
}

export function createLazyComponent(options: LazyComponentOptions) {
  const { loader, retries = 3, ...restOptions } = options

  return defineAsyncComponent({
    loader: async () => {
      let lastError: Error | null = null
      
      for (let i = 0; i <= retries; i++) {
        try {
          return await loader()
        } catch (error) {
          lastError = error as Error
          if (i < retries) {
            // 指数退避重试
            await new Promise(resolve => 
              setTimeout(resolve, Math.pow(2, i) * 1000)
            )
          }
        }
      }
      
      throw lastError
    },
    ...restOptions
  })
}

// 使用示例
export const LazyDashboard = createLazyComponent({
  loader: () => import('@/views/Dashboard.vue'),
  loadingComponent: () => h('div', { class: 'loading' }, '加载中...'),
  errorComponent: () => h('div', { class: 'error' }, '加载失败'),
  delay: 200,
  timeout: 30000,
  retries: 2
})

<!-- components/SmartKeepAlive.vue -->
<script setup lang="ts">
import { ref, computed, watch } from 'vue'

interface CacheConfig {
  max: number
  ttl: number // 生存时间 (毫秒)
  strategy: 'lru' | 'fifo' | 'priority'
}

const props = withDefaults(defineProps<{
  config: CacheConfig
}>(), {
  config: () => ({
    max: 10,
    ttl: 5 * 60 * 1000, // 5分钟
    strategy: 'lru'
  })
})

interface CacheItem {
  component: string
  timestamp: number
  accessCount: number
  priority: number
}

const cache = ref(new Map<string, CacheItem>())

// 动态 include 列表
const includeList = computed(() => {
  const now = Date.now()
  const validComponents: string[] = []

  cache.value.forEach((item, key) => {
    // 检查 TTL
    if (now - item.timestamp > props.config.ttl) {
      cache.value.delete(key)
      return
    }

    validComponents.push(key)
  })

  // 根据策略限制缓存数量
  if (validComponents.length > props.config.max) {
    const sorted = validComponents
      .map(key => ({ key, ...cache.value.get(key)! }))
      .sort((a, b) => {
        switch (props.config.strategy) {
          case 'lru':
            return a.timestamp - b.timestamp
          case 'priority':
            return b.priority - a.priority
          default: // fifo
            return a.timestamp - b.timestamp
        }
      })

    const toKeep = sorted.slice(0, props.config.max).map(item => item.key)
    
    // 清理多余的缓存
    cache.value.forEach((_, key) => {
      if (!toKeep.includes(key)) {
        cache.value.delete(key)
      }
    })

    return toKeep
  }

  return validComponents
})

// 更新缓存信息
const updateCache = (componentName: string) => {
  const now = Date.now()
  const existing = cache.value.get(componentName)

  if (existing) {
    existing.timestamp = now
    existing.accessCount++
  } else {
    cache.value.set(componentName, {
      component: componentName,
      timestamp: now,
      accessCount: 1,
      priority: 1
    })
  }
}

defineExpose({
  updateCache,
  clearCache: () => cache.value.clear(),
  getCacheStats: () => ({
    size: cache.value.size,
    items: Array.from(cache.value.entries())
  })
})
</script>

<template>
  <KeepAlive :include="includeList" :max="config.max">
    <slot @vue:activated="updateCache" />
  </KeepAlive>
</template>

// utils/memory-monitor.ts
class MemoryMonitor {
  private components = new WeakMap()
  private timers = new Set<number>()
  private listeners = new Set<() => void>()

  // 组件内存追踪
  trackComponent(instance: any, name: string) {
    this.components.set(instance, {
      name,
      createdAt: Date.now(),
      watchers: [],
      timers: [],
      listeners: []
    })
  }

  // 追踪定时器
  trackTimer(timerId: number) {
    this.timers.add(timerId)
    return timerId
  }

  // 追踪事件监听器
  trackListener(cleanup: () => void) {
    this.listeners.add(cleanup)
    return cleanup
  }

  // 清理资源
  cleanup() {
    // 清理定时器
    this.timers.forEach(id => clearTimeout(id))
    this.timers.clear()

    // 清理事件监听器
    this.listeners.forEach(cleanup => cleanup())
    this.listeners.clear()
  }

  // 内存使用报告
  getMemoryReport() {
    const performance = (window as any).performance
    if (performance?.memory) {
      return {
        used: Math.round(performance.memory.usedJSHeapSize / 1048576 * 100) / 100,
        total: Math.round(performance.memory.totalJSHeapSize / 1048576 * 100) / 100,
        limit: Math.round(performance.memory.jsHeapSizeLimit / 1048576 * 100) / 100,
        components: this.components,
        activeTimers: this.timers.size,
        activeListeners: this.listeners.size
      }
    }
    return null
  }
}

export const memoryMonitor = new MemoryMonitor()

// 组合式函数：安全的资源管理
export function useResourceCleanup() {
  const cleanup = new Set<() => void>()

  const addCleanup = (fn: () => void) => {
    cleanup.add(fn)
    return fn
  }

  const safeSetTimeout = (callback: () => void, delay: number) => {
    const id = setTimeout(callback, delay)
    addCleanup(() => clearTimeout(id))
    return id
  }

  const safeSetInterval = (callback: () => void, delay: number) => {
    const id = setInterval(callback, delay)
    addCleanup(() => clearInterval(id))
    return id
  }

  const addEventListener = (
    element: EventTarget,
    event: string,
    handler: EventListener,
    options?: AddEventListenerOptions
  ) => {
    element.addEventListener(event, handler, options)
    addCleanup(() => element.removeEventListener(event, handler))
  }

  onUnmounted(() => {
    cleanup.forEach(fn => fn())
    cleanup.clear()
  })

  return {
    addCleanup,
    safeSetTimeout,
    safeSetInterval,
    addEventListener
  }
}

<!-- components/SafeDataTable.vue -->
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useResourceCleanup } from '@/utils/memory-monitor'

interface TableData {
  id: number
  name: string
  status: string
  lastUpdate: Date
}

const data = ref<TableData[]>([])
const loading = ref(false)

// 使用安全的资源管理
const { safeSetInterval, addEventListener, addCleanup } = useResourceCleanup()

// WebSocket 连接管理
let socket: WebSocket | null = null

const connectWebSocket = () => {
  socket = new WebSocket('ws://localhost:8080/data')
  
  socket.onmessage = (event) => {
    const newData = JSON.parse(event.data)
    data.value = newData
  }

  socket.onerror = (error) => {
    console.error('WebSocket error:', error)
  }

  // 注册清理函数
  addCleanup(() => {
    if (socket) {
      socket.close()
      socket = null
    }
  })
}

// 定时刷新数据
const startPolling = () => {
  safeSetInterval(async () => {
    if (!loading.value) {
      loading.value = true
      try {
        const response = await fetch('/api/data')
        data.value = await response.json()
      } catch (error) {
        console.error('Polling error:', error)
      } finally {
        loading.value = false
      }
    }
  }, 30000) // 30秒刷新一次
}

// 窗口焦点处理
const handleVisibilityChange = () => {
  if (document.hidden) {
    // 页面隐藏时暂停轮询
    console.log('Page hidden, pausing updates')
  } else {
    // 页面重新可见时恢复
    console.log('Page visible, resuming updates')
  }
}

onMounted(() => {
  connectWebSocket()
  startPolling()
  
  // 安全地添加事件监听器
  addEventListener(document, 'visibilitychange', handleVisibilityChange)
})

// onUnmounted 由 useResourceCleanup 自动处理
</script>

<template>
  <div class="data-table">
    <div v-if="loading" class="loading">更新中...</div>
    
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>状态</th>
          <th>最后更新</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.status }}</td>
          <td>{{ item.lastUpdate.toLocaleString() }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  
  build: {
    // 启用 gzip 压缩
    reportCompressedSize: true,
    
    // 代码分割策略
    rollupOptions: {
      output: {
        manualChunks: {
          // 将 Vue 相关库单独打包
          vue: ['vue', 'vue-router', 'pinia'],
          
          // UI 组件库单独打包
          ui: ['element-plus', 'ant-design-vue'],
          
          // 工具库单独打包
          utils: ['lodash-es', 'date-fns', 'axios'],
          
          // 按路由分割
          home: ['./src/views/Home.vue'],
          dashboard: ['./src/views/Dashboard.vue']
        },
        
        // 文件命名策略
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    },
    
    // 压缩配置
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境移除 console
        drop_debugger: true,
        pure_funcs: ['console.log'] // 移除特定函数调用
      }
    },
    
    // 资源内联限制
    assetsInlineLimit: 4096,
    
    // CSS 代码分割
    cssCodeSplit: true
  },
  
  // 开发服务器优化
  server: {
    hmr: {
      overlay: false // 禁用错误遮罩层以提升性能
    }
  },
  
  // 依赖预构建优化
  optimizeDeps: {
    include: [
      'vue',
      'vue-router',
      'pinia',
      'lodash-es',
      'date-fns'
    ],
    exclude: ['@iconify/json'] // 排除大型 JSON 文件
  }
})

// utils/optimized-imports.ts

// ✅ 优化：按需导入
import { debounce, throttle } from 'lodash-es'
import { format, parseISO } from 'date-fns'

// 🔴 避免：全量导入
// import _ from 'lodash'
// import * as dateFns from 'date-fns'

// ✅ 优化：使用 ES 模块的具名导入
export { ref, reactive, computed } from 'vue'

// ✅ 优化：动态导入大型库
export async function loadChartLibrary() {
  const { Chart } = await import('chart.js')
  return Chart
}

// ✅ 优化：条件加载
export async function loadPolyfills() {
  if (!window.IntersectionObserver) {
    await import('intersection-observer')
  }
  
  if (!window.ResizeObserver) {
    await import('resize-observer-polyfill')
  }
}

// utils/performance-metrics.ts
interface PerformanceMetrics {
  fcp: number // First Contentful Paint
  lcp: number // Largest Contentful Paint
  fid: number // First Input Delay
  cls: number // Cumulative Layout Shift
  ttfb: number // Time to First Byte
}

class PerformanceCollector {
  private metrics: Partial<PerformanceMetrics> = {}
  
  constructor() {
    this.collectMetrics()
  }
  
  private collectMetrics() {
    // 收集 Core Web Vitals
    this.collectWebVitals()
    
    // 收集自定义指标
    this.collectCustomMetrics()
    
    // 收集 Vue 特定指标
    this.collectVueMetrics()
  }
  
  private collectWebVitals() {
    // FCP
    new PerformanceObserver((list) => {
      const entries = list.getEntries()
      const fcpEntry = entries.find(entry => entry.name === 'first-contentful-paint')
      if (fcpEntry) {
        this.metrics.fcp = fcpEntry.startTime
      }
    }).observe({ entryTypes: ['paint'] })
    
    // LCP
    new PerformanceObserver((list) => {
      const entries = list.getEntries()
      const lastEntry = entries[entries.length - 1]
      this.metrics.lcp = lastEntry.startTime
    }).observe({ entryTypes: ['largest-contentful-paint'] })
    
    // FID
    new PerformanceObserver((list) => {
      const entries = list.getEntries()
      const firstEntry = entries[0]
      this.metrics.fid = firstEntry.processingStart - firstEntry.startTime
    }).observe({ entryTypes: ['first-input'] })
    
    // CLS
    let clsValue = 0
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (!(entry as any).hadRecentInput) {
          clsValue += (entry as any).value
        }
      }
      this.metrics.cls = clsValue
    }).observe({ entryTypes: ['layout-shift'] })
  }
  
  private collectCustomMetrics() {
    // 组件渲染时间
    const renderStart = performance.now()
    
    this.$nextTick(() => {
      const renderEnd = performance.now()
      this.reportMetric('component-render-time', renderEnd - renderStart)
    })
  }
  
  private collectVueMetrics() {
    // 监控组件更新性能
    const app = getCurrentInstance()?.appContext.app
    
    if (app && import.meta.env.DEV) {
      app.config.performance = true
      
      // 组件渲染性能
      app.config.globalProperties.$reportPerformance = (name: string, duration: number) => {
        console.log(`🎯 ${name}: ${duration.toFixed(2)}ms`)
      }
    }
  }
  
  public reportMetric(name: string, value: number) {
    // 发送到分析服务
    if (import.meta.env.PROD) {
      navigator.sendBeacon('/api/metrics', JSON.stringify({
        name,
        value,
        timestamp: Date.now(),
        url: window.location.href,
        userAgent: navigator.userAgent
      }))
    }
  }
  
  public getMetrics(): Partial<PerformanceMetrics> {
    return { ...this.metrics }
  }
}

export const performanceCollector = new PerformanceCollector()

// scripts/analyze-bundle.ts
import { defineConfig } from 'vite'
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'

export default defineConfig({
  plugins: [
    // Rollup 插件版本的 bundle 分析器
    {
      name: 'bundle-analyzer',
      writeBundle() {
        if (process.env.ANALYZE) {
          import('rollup-plugin-visualizer').then(({ visualizer }) => {
            visualizer({
              filename: 'dist/stats.html',
              open: true,
              template: 'treemap'
            })
          })
        }
      }
    }
  ]
})

// package.json 脚本
// "scripts": {
//   "build:analyze": "ANALYZE=true vite build"
// }

// 开发时性能检查清单
export const PERFORMANCE_CHECKLIST = {
  响应式优化: [
    '✅ 合理使用 shallowRef/shallowReactive',
    '✅ 避免在 template 中进行复杂计算',
    '✅ 使用 computed 缓存派生状态',
    '✅ 避免不必要的深度监听'
  ],
  
  组件优化: [
    '✅ 使用 v-memo 缓存复杂列表项',
    '✅ 合理拆分大型组件',
    '✅ 使用异步组件延迟加载',
    '✅ 实现虚拟滚动处理大列表'
  ],
  
  内存管理: [
    '✅ 及时清理定时器和事件监听器',
    '✅ 避免闭包引用大对象',
    '✅ 合理使用 KeepAlive',
    '✅ 监控组件卸载是否正常'
  ],
  
  构建优化: [
    '✅ 配置合理的代码分割策略',
    '✅ 启用 Tree-shaking',
    '✅ 压缩和混淆代码',
    '✅ 优化资源加载策略'
  ]
}

// composables/usePerformanceOptimization.ts
export function usePerformanceOptimization() {
  const { safeSetTimeout, safeSetInterval } = useResourceCleanup()
  
  // 防抖
  const debounced = <T extends (...args: any[]) => any>(
    fn: T,
    delay: number
  ): T => {
    let timeoutId: number | null = null
    
    return ((...args: Parameters<T>) => {
      if (timeoutId) clearTimeout(timeoutId)
      timeoutId = safeSetTimeout(() => fn(...args), delay)
    }) as T
  }
  
  // 节流
  const throttled = <T extends (...args: any[]) => any>(
    fn: T,
    delay: number
  ): T => {
    let lastCall = 0
    
    return ((...args: Parameters<T>) => {
      const now = Date.now()
      if (now - lastCall >= delay) {
        lastCall = now
        return fn(...args)
      }
    }) as T
  }
  
  // 批量更新
  const batchUpdate = <T>(
    updates: (() => void)[],
    callback?: () => void
  ) => {
    nextTick(() => {
      updates.forEach(update => update())
      callback?.()
    })
  }
  
  return {
    debounced,
    throttled,
    batchUpdate
  }
}