Vue性能优化

Vue 性能优化笔记

1. 常见性能问题

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

2. 优化策略

1. v-for + key 优化

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

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

2. 组件懒加载

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

3. 列表虚拟化

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

4. 避免不必要的 watch

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

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

5. keep-alive 缓存组件

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

---

模块 3：异步请求处理

id

# 异步请求处理笔记

## 1. 常见问题

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

## 2. 解决策略

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

2. 请求取消

• Axios cancelToken / AbortController

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

3. 顺序请求

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

4. 全局错误处理

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