Vue 3 性能优化小技巧
1.别在模板里写“方法调用”，用 computed + 缓存
const formattedName = computed(() =>
`${user.value.firstName} ${user.value.lastName}`
);<template>
<div>{{ formattedName }}</div> <!-- 响应式缓存，依赖不变不重算 -->
</template>2.v-for 里的组件，记得加 key —— 但别用 index
<div v-for="item in list" :key="item.id">
<ItemCard :data="item" />
</div>3.懒加载组件 + 异步 setup，减少首屏负担
<template>
<Suspense>
<template #default>
<LazyChart />
</template>
<template #fallback>
<div>Loading chart...</div>
</template>
</Suspense>
</template>
<script setup>
// 自动代码分割
const LazyChart = defineAsyncComponent(() => import('./HeavyChart.vue'));
</script>Vue 3 性能优化小技巧
http://localhost:8090/archives/vue-3-xing-neng-you-hua-xiao-ji-qiao