Vue性能优化

| 2026-01-11

Vue 性能优化笔记

1. 常见性能问题

大型列表渲染过慢
不必要的组件重渲染
频繁 watch 或计算属性计算
过度使用 v-if/v-for

2. 优化策略

v-for + key 优化

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

key 唯一可追踪，减少 DOM 重建

组件懒加载

1	const LazyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

列表虚拟化

只渲染可视区域节点，减少 DOM
可使用 vue-virtual-scroll-list 或自定义虚拟滚动

避免不必要的 watch

watchEffect 自动追踪依赖，减少手动依赖计算

1
2
3

watchEffect(() => {
    console.log(state.value);
});

keep-alive 缓存组件

1
2
3

<keep-alive>
  <MyComponent v-if="show" />
</keep-alive>

模块 3：异步请求处理

id

# 异步请求处理笔记

## 1. 常见问题

- 并发请求过多
- 请求顺序依赖
- 请求取消
- 异步错误未捕获

## 2. 解决策略

1. **Promise 并发控制**
```javascript
Promise.all([fetchA(), fetchB()]).then(([a, b]) => { ... });

请求取消

Axios cancelToken / AbortController

const controller = new AbortController();
fetch('/api', { signal: controller.signal });
// 取消请求
controller.abort();

顺序请求

async function loadData() {
    const data1 = await fetchA();
    const data2 = await fetchB(data1);
}

全局错误处理

axios.interceptors.response.use(
  res => res,
  err => { console.error(err); return Promise.reject(err); }
)