性能优化建议

数据响应式优化

Vue.js 的响应式系统是其核心特性，但不当使用会导致性能问题。避免在大型数组或对象上使用 Vue.set 或 this.$set，这会触发全量响应式更新。对于静态数据，使用 Object.freeze() 可以阻止 Vue 添加响应式特性：

export default {
  data() {
    return {
      largeList: Object.freeze([...]) // 冻结大型静态列表
    }
  }
}

计算属性的缓存机制能有效减少重复计算。当依赖项未变化时，计算属性会直接返回缓存值：

computed: {
  filteredItems() {
    // 只有当源数组变化时才重新计算
    return this.largeList.filter(item => item.isActive)
  }
}

虚拟 DOM 优化

合理使用 key 属性能帮助 Vue 更高效地复用 DOM 元素。对于列表渲染，避免使用索引作为 key，应该使用唯一标识符：

<template v-for="item in items" :key="item.id">
  <div>{{ item.content }}</div>
</template>

对于频繁变化的复杂组件，使用 v-once 指令可以使其只渲染一次：

<div v-once>
  <ComplexComponent :prop="staticValue"/>
</div>

组件优化策略

功能拆分成更小的组件能提高复用性和渲染效率。避免在父组件中处理所有逻辑：

// 不好的做法：大型组件包含过多逻辑
// 好的做法：拆分成 Presentational 和 Container 组件
const SmartList = {
  components: { DumbList },
  template: `
    <DumbList :items="processedItems" @select="handleSelect"/>
  `,
  methods: {
    handleSelect(item) {
      // 业务逻辑处理
    }
  }
}

对于不常变化的子组件，使用 v-show 替代 v-if 可以避免重复渲染开销：

<TabContent v-show="activeTab === 'stats'"/>

事件处理优化

频繁触发的事件（如 scroll、resize）应该使用防抖或节流。Lodash 的 _.throttle 可以直接使用：

import { throttle } from 'lodash'

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

自定义事件的监听要及时销毁，避免内存泄漏：

mounted() {
  this.$on('custom-event', this.handler)
},
beforeDestroy() {
  this.$off('custom-event', this.handler)
}

状态管理优化

Vuex 的大型状态树会影响性能。按模块拆分状态，并使用 getter 进行派生状态计算：

const store = new Vuex.Store({
  modules: {
    user: userModule,
    products: productsModule
  },
  getters: {
    featuredProducts: state => {
      return state.products.all.filter(p => p.isFeatured)
    }
  }
})

对于不常变化的数据，考虑使用本地存储替代 Vuex：

// 从本地存储初始化数据
data() {
  return {
    preferences: JSON.parse(localStorage.getItem('prefs')) || {}
  }
},
watch: {
  preferences: {
    handler(newVal) {
      localStorage.setItem('prefs', JSON.stringify(newVal))
    },
    deep: true
  }
}

异步组件与代码分割

路由级和组件级的代码分割能显著减少初始加载时间。使用动态导入语法：

const AsyncComponent = () => ({
  component: import('./HeavyComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
})

对于 Vue Router，配置组件级别的懒加载：

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

渲染函数优化

在需要极致性能的场景，使用渲染函数代替模板。这避免了模板编译步骤：

render(h) {
  return h('div', {
    class: {'active': this.isActive}
  }, [
    h('span', this.text),
    this.showIcon ? h(Icon) : null
  ])
}

对于静态内容，使用 _c (createStaticVNode) 可以跳过 diff 过程：

render(h) {
  return h('div', [
    this._c('header', { staticClass: 'app-header' }),
    this.dynamicContent ? h(Content) : null
  ])
}

第三方库集成

选择性导入 Lodash 函数而不是整个库：

import debounce from 'lodash/debounce'

对于 UI 库如 ElementUI，按需引入组件：

import { Button, Select } from 'element-ui'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

生产环境配置

确保构建时启用生产模式，这会移除警告和开发工具：

// vue.config.js
module.exports = {
  configureWebpack: {
    mode: process.env.NODE_ENV === 'production' 
      ? 'production' 
      : 'development'
  }
}

启用 Gzip 压缩和 Brotli 压缩能显著减小资源体积：

// 使用 compression-webpack-plugin
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip'
      })
    ]
  }
}

性能监控与分析

使用 Vue Devtools 的 Performance 面板记录组件渲染时间。添加自定义性能标记：

mounted() {
  window.performance.mark('component-mounted-start')
  // 初始化逻辑
  window.performance.mark('component-mounted-end')
  window.performance.measure(
    'Component Mount',
    'component-mounted-start',
    'component-mounted-end'
  )
}

对于线上监控，集成 Web Vitals：

import { getCLS, getFID, getLCP } from 'web-vitals'

getCLS(console.log)
getFID(console.log)
getLCP(console.log)