Vue3 提供了多种性能优化方法，以下是一些常见的优化技巧：
1. 虚拟列表（Virtual Scrolling）
当渲染大量数据列表时，使用虚拟列表只渲染可视区域的内容，显著减少 DOM 节点数量。
示例库：vue-virtual-scroller、vueuse/core
2. 组件懒加载（Async Components）
对于非关键组件或复杂组件，使用动态导入延迟加载：
<script setup>
import { defineAsyncComponent } from 'vue'const HeavyComponent = defineAsyncComponent(() => import('./HeavyComponent.vue'))
</script>3. 缓存组件（Keep-Alive）
使用 <Keep-Alive> 缓存频繁切换的组件，避免重复渲染：
<Keep-Alive><RouterView />
</Keep-Alive>4. 事件监听器优化
- 在不需要响应式的地方使用普通函数而非箭头函数。
- 避免在循环中绑定事件处理器，可通过事件代理优化：
<div @click="handleClick"><div v-for="item in list" :data-id="item.id">{{ item.name }}</div>
</div><script setup>
const handleClick = (e) => {const id = e.target.dataset.idif (id) {// 处理点击逻辑}
}
</script>5. 计算属性缓存（Computed Caching）
利用计算属性的缓存特性，避免重复计算：
<script setup>
import { computed, ref } from 'vue'const list = ref([1, 2, 3, 4, 5])
const evenNumbers = computed(() => list.value.filter(n => n % 2 === 0))
</script>6. 避免响应式陷阱
- 对于大型静态数据（如常量配置），使用
markRaw()避免转为响应式对象：
import { markRaw } from 'vue'const largeStaticData = markRaw({ /* 大量数据 */ })- 使用
shallowRef()和shallowReactive()创建浅层响应式对象。
7. 优化 v-for 指令
- 始终为
v-for提供唯一的:key。 - 避免在同一元素上同时使用
v-for和v-if（可通过计算属性过滤数据）。
8. 按需引入组件
对于大型组件库（如 Element Plus、Ant Design Vue），按需引入组件减少打包体积：
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})9. 优化响应式更新范围
- 使用
reactive()替代ref()包装复杂对象，减少嵌套层级。 - 避免深层响应式更新，可通过拆分组件或使用
toRefs()解耦数据。
10. 生产环境优化
- 使用
vite或webpack等工具进行代码分割和 Tree-Shaking。 - 移除开发时的调试工具（如
console.log、Vue DevTools 钩子）：
// vite.config.js
export default defineConfig({define: {__VUE_PROD_DEVTOOLS__: false,},
})11. 服务端渲染）/ 静态站点生成（SSG）
对于内容型应用，使用 Vue Server Renderer 或 Nuxt.js 提升首屏加载速度。
12. 使用 VueUse 工具库
VueUse 提供了许多性能优化的组合式函数，如 useIntersectionObserver 实现懒加载：
<script setup>
import { useIntersectionObserver } from '@vueuse/core'const target = ref(null)
const { stop } = useIntersectionObserver(target,([{ isIntersecting }]) => {if (isIntersecting) {// 元素进入视口时执行加载逻辑stop() // 停止监听}}
)
</script><template><img ref="target" src="lazy-image.jpg" alt="懒加载图片" />
</template>总结
根据应用场景选择合适的优化策略：
- 大量数据渲染：优先使用虚拟列表。
- 复杂组件：使用懒加载和缓存。
- 频繁更新：优化响应式对象和计算属性。
- 生产环境：做好打包优化和代码分割。
通过这些技巧，可以显著提升 Vue3 应用的性能和用户体验。
