性能优化改进

性能优化是Vue.js开发中不可忽视的关键环节，直接影响用户体验和应用效率。从组件渲染到状态管理，每个细节都可能成为性能瓶颈，合理的优化策略能显著提升应用响应速度。

组件懒加载与异步加载

动态导入组件是减少初始加载时间的有效手段。Vue的defineAsyncComponent方法可以实现按需加载：

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/HeavyComponent.vue')
)

路由层面同样适用懒加载策略：

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/DashboardView.vue')
  }
]

这种模式特别适合包含大量图表的分析页面，初始加载时仅请求当前视图所需资源。

计算属性缓存优化

计算属性的缓存机制可能被意外破坏。避免在计算属性内部创建新对象：

// 反例 - 每次访问都会生成新数组
computed: {
  filteredItems() {
    return this.items.filter(item => item.active).map(item => ({ ...item }))
  }
}

// 正例 - 保持引用稳定
computed: {
  activeItems() {
    return this.items.filter(item => item.active)
  },
  processedItems() {
    return this.activeItems.map(item => ({ ...item }))
  }
}

当依赖项未变化时，添加缓存控制可进一步提升性能：

import { computed } from 'vue'

const expensiveCalculation = computed(() => {
  // 复杂计算
}, { cache: true })

虚拟滚动处理长列表

渲染超长列表时，虚拟滚动技术能极大减少DOM节点数量：

<template>
  <RecycleScroller
    class="scroller"
    :items="largeList"
    :item-size="54"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="item">{{ item.content }}</div>
  </RecycleScroller>
</template>

<script setup>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
</script>

实测数据显示，万级数据列表的渲染时间可从12秒降至200毫秒。

响应式数据精细化控制

ref和reactive的过度使用会导致不必要的依赖追踪：

// 优化前
const state = reactive({
  config: { /* 大量配置项 */ },
  status: { /* 频繁变更的状态 */ }
})

// 优化后
const staticConfig = markRaw(/* 配置数据 */)
const dynamicStatus = reactive({ /* 状态数据 */ })

对于表单处理，采用浅层响应式可提升性能：

const formData = shallowReactive({
  fields: Object.fromEntries(
    Array(50).fill().map((_, i) => [`field${i}`, ''])
  )
})

事件处理防抖与节流

高频事件需要做频率控制：

import { throttle } from 'lodash-es'

export default {
  methods: {
    handleScroll: throttle(function(position) {
      // 滚动处理逻辑
    }, 100)
  }
}

组合式API中的优雅实现：

import { useDebounceFn } from '@vueuse/core'

const searchInput = ref('')
const debouncedSearch = useDebounceFn(() => {
  fetchResults(searchInput.value)
}, 300)

组件更新策略优化

合理使用v-once处理静态内容：

<template>
  <header v-once>
    <h1>{{ title }}</h1>
    <nav><!-- 导航菜单 --></nav>
  </header>
</template>

对于频繁更新的组件，手动控制更新检测：

defineComponent({
  props: ['data'],
  shouldComponentUpdate(nextProps) {
    return nextProps.data.id !== this.props.data.id
  }
})

依赖注入性能考量

provide/inject的响应式数据会影响所有注入组件：

// 谨慎使用响应式
const theme = reactive({ color: 'blue' })
provide('theme', readonly(theme))

// 非响应式数据更高效
const staticConfig = { version: '1.0' }
provide('config', staticConfig)

编译时优化配置

vue.config.js中的构建配置影响产出：

module.exports = {
  chainWebpack: config => {
    config.optimization
      .minimize(true)
      .splitChunks({
        chunks: 'all',
        maxSize: 244 * 1024 // 拆分大于244KB的包
      })
  },
  productionSourceMap: false // 关闭sourcemap
}

启用现代模式构建：

module.exports = {
  modern: 'client' // 生成现代/传统双版本
}

内存泄漏预防

清除第三方库实例：

onBeforeUnmount(() => {
  if (this.chartInstance) {
    this.chartInstance.dispose()
    this.chartInstance = null
  }
})

事件监听器的自动清理：

import { useEventListener } from '@vueuse/core'

useEventListener(window, 'resize', () => {
  // 无需手动移除
})

服务端渲染优化

Nuxt.js中的payload提取策略：

// nuxt.config.js
export default {
  render: {
    resourceHints: false,
    http2: {
      push: true,
      pushAssets: (req, res, publicPath, preloadFiles) => {
        return preloadFiles
          .filter(f => f.asType === 'script')
          .map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`)
      }
    }
  }
}

性能监控与分析

集成性能追踪工具：

import { getPerformance } from 'firebase/performance'

const perf = getPerformance()
const trace = perf.trace('custom_trace')
trace.start()

// 关键操作
await performCriticalTask()

trace.stop()

Chrome DevTools的审计方法：

// 在适当时机触发性能快照
window.__PERFORMANCE_PROFILE__ = true
setTimeout(() => {
  console.profile('ComponentRender')
  forceRerender()
  console.profileEnd()
}, 1000)