Vue 项目有哪些性能优化手段？

详细解析#

加载层面#

• 路由懒加载：component: () => import('./views/Report.vue')，每个页面单独打包，访问时才加载
• 异步组件：弹窗、图表这类首屏用不到的大组件，用 defineAsyncComponent(() => import('./Chart.vue')) 延迟加载
• 组件库按需引入：只打包用到的组件和样式，比如 Element Plus 配合 unplugin-vue-components 自动按需导入
• 分析打包体积：用 rollup-plugin-visualizer 等工具找出体积大的依赖。压缩、CDN、缓存等通用手段详见 前端性能优化

渲染层面#

还有两点容易被忽视：

• 保持 props 稳定：父组件更新时，Vue 会对比传给子组件的 props，没有变化的子组件会跳过渲染。如果在模板中写 :options="{ size: currentSize }" 这样的对象字面量，每次渲染都会生成一个新对象，子组件就会跟着更新，在 props 中写内联的箭头函数也是同理。这类对象可以改用 computed 生成。列表项只接收和自己相关的值，比如传 :active="item.id === activeId"，而不是把 activeId 传给每一项，这样切换选中项时只有两项需要更新
• 不在模板中调用开销大的方法：模板中调用的方法每次渲染都会重新执行，需要缓存结果的改用计算属性

响应式层面#

• shallowRef / shallowReactive：只有第一层是响应式的。几千条的列表、大型 JSON、图表数据这类一般整体替换的数据，用它们可以省掉深层代理和依赖收集的开销
• markRaw：标记一个对象，让它永远不会被转成响应式。适合第三方库的实例（如图表、地图实例）和大型静态配置，这类对象被代理不但浪费性能，有时还会让库工作异常

运行时#

• 输入框搜索、滚动、resize 这类高频事件要做防抖或节流，详见 防抖和节流
• 组件卸载时清理定时器、全局事件监听和第三方库实例，避免内存泄漏，详见 常见的内存泄漏

定位问题#

• Vue DevTools：用它的性能分析功能查看各个组件渲染、更新的耗时，找出渲染慢或者更新太频繁的组件
• Chrome Performance 面板：录制一段操作，找出长任务和耗时的函数。开发环境下设置 app.config.performance = true，还能在面板中看到每个组件初始化、渲染、更新的耗时标记

代码示例#

<script setup>
import { ref, shallowRef, onMounted } from 'vue'
import { fetchRows } from './api'

// 数据量大、一般整体替换：只追踪 .value 本身，不会深度代理每一行
const rows = shallowRef([])
const selectedId = ref(null)

onMounted(async () => {
  rows.value = await fetchRows()
})

function rename(id, name) {
  // ❌ 直接修改内部属性不会触发更新
  // rows.value.find((row) => row.id === id).name = name

  // ✅ 生成新数组，整体替换 .value
  rows.value = rows.value.map((row) => (row.id === id ? { ...row, name } : row))
}
</script>

<template>
  <!-- 依赖数组没变的行直接跳过更新：切换选中项时，只有选中状态变化的两行会重新渲染 -->
  <div
    v-for="row in rows"
    :key="row.id"
    v-memo="[row.id === selectedId, row.name]"
    :class="{ active: row.id === selectedId }"
    @click="selectedId = row.id"
  >
    {{ row.name }}
  </div>
</template>

面试官可能追问#

易错点#

• shallowRef 内部属性的修改不会触发更新，要整体替换 .value
• v-memo 的依赖数组写漏了，会导致界面不更新
• 路由组件直接用 () => import() 懒加载即可，不需要再用 defineAsyncComponent 包裹