---

一、前言

Angular 转 Vue3 迁移实战：从0到1 是当前技术圈热议的话题。本文从实际场景出发，帮你快速掌握核心要点。

---

二、核心概念

2.1 什么是Vue3

Vue3是现代软件开发中不可或缺的一环，下面通过一个典型场景来理解它的核心价值。

2.2 基本用法

// 基础示例
async function main() {
  const vue = await initVue3();
  console.log('初始化成功:', vue);
}
main();

---

三、实战案例

3.1 典型业务场景

在实际项目中，我们经常会遇到需要Angular和Vue3的场景。以下代码展示了完整实现：

class Vue3Manager {
  constructor(config) {
    this.config = config;
    this.cache = new Map();
  }

  async getData(key) {
    if (this.cache.has(key)) {
      return this.cache.get(key);
    }
    const data = await this.fetchData(key);
    this.cache.set(key, data);
    return data;
  }

  async fetchData(key) {
    // 实现数据获取逻辑
    return { key, value: `${key}_data`, timestamp: Date.now() };
  }
}

3.2 错误处理

try {
  const result = await vueManager.getData('user:1');
  console.log(result);
} catch (error) {
  console.error('获取数据失败:', error.message);
}

---

四、常见错误与正确做法

错误一：没有处理边界情况

// 错误 ❌
function getValue(data) {
  return data.value; // data 为 null 时直接崩溃
}

// 正确 ✅
function getValue(data) {
  return data?.value ?? '默认值';
}

错误二：忘记清理资源

// 正确做法：使用 finally 或 try-with-resources 模式
async function process() {
  const conn = await createConnection();
  try {
    return await conn.query('SELECT * FROM users');
  } finally {
    await conn.close(); // 无论如何都要关闭连接
  }
}

---

五、性能优化

5.1 缓存策略

合理的缓存可以大幅提升系统吞吐量：

// LRU 缓存实现
class LRUCache {
  constructor(maxSize = 100) {
    this.maxSize = maxSize;
    this.cache = new Map();
  }

  get(key) {
    if (!this.cache.has(key)) return null;
    const value = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, value);
    return value;
  }

  set(key, value) {
    if (this.cache.has(key)) this.cache.delete(key);
    else if (this.cache.size >= this.maxSize) {
      const firstKey = this.cache.keys().next().value;
      this.cache.delete(firstKey);
    }
    this.cache.set(key, value);
  }
}

5.2 批量处理

// 批量请求合并，减少网络开销
async function batchFetch(keys) {
  return new Promise((resolve) => {
    const results = new Array(keys.length);
    let pending = keys.length;

    keys.forEach((key, i) => {
      fetch(key).then(data => {
        results[i] = data;
        pending--;
        if (pending === 0) resolve(results);
      });
    });
  });
}

---

六、总结

本文从Angular、Vue3两个角度系统讲解了Angular 转 Vue3 迁移实战：从0到1的核心知识点。记住以下关键点：

1. 理解原理比死记 API 重要，懂了原理就能举一反三
2. 生产环境必须做好错误处理和资源清理
3. 性能优化要从缓存、批量处理、懒加载三个方向入手
4. 养成看文档、看源码的习惯，持续提升

💬 收藏本文！关注我，后续更新更多实战系列文章。

---

三、实战进阶：Angular 最佳实践

3.1 错误处理与异常设计

在生产环境中，完善的错误处理是系统稳定性的基石。以下是 Angular 的推荐错误处理模式：

// 全局错误边界（React）/ 全局错误处理（Vue3）
// Vue3 全局错误处理
const app = createApp(App);

app.config.errorHandler = (err, instance, info) => {
  // 1. 上报错误到监控系统（Sentry/自建）
  errorReporter.capture(err, {
    component: instance?.$options?.name,
    info,
    userAgent: navigator.userAgent,
    url: location.href,
  });

  // 2. 区分错误类型：网络错误 vs 业务错误 vs 未知错误
  if (err instanceof NetworkError) {
    toast.error('网络连接失败，请检查网络');
  } else if (err instanceof BusinessError) {
    toast.warning(err.message);
  } else {
    toast.error('系统异常，请稍后重试');
    console.error('[未知错误]', err);
  }
};

// 异步错误：Promise.reject 未处理
window.addEventListener('unhandledrejection', (event) => {
  errorReporter.capture(event.reason, { type: 'unhandledrejection' });
  event.preventDefault(); // 阻止默认的控制台报错
});

---

3.2 性能监控与可观测性

现代系统必须具备三大可观测性：Metrics（指标）、Logs（日志）、Traces（链路追踪）。

// 前端性能监控：Core Web Vitals + 自定义指标
import { onCLS, onFID, onFCP, onLCP, onTTFB } from 'web-vitals';

// 收集 Web Vitals 并上报
function reportWebVitals(metric) {
  const { name, value, id, delta } = metric;

  // 发送到自建监控或 Google Analytics
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify({
      name,           // CLS/FID/FCP/LCP/TTFB
      value,          // 当前值
      delta,          // 与上次的差值
      id,             // 唯一标识
      page: location.pathname,
      timestamp: Date.now(),
    }),
    keepalive: true,  // 页面关闭时也能发送
  });
}

onCLS(reportWebVitals);   // 累积布局偏移
onFID(reportWebVitals);   // 首次输入延迟
onLCP(reportWebVitals);   // 最大内容绘制（< 2.5s 为优）
onFCP(reportWebVitals);   // 首次内容绘制
onTTFB(reportWebVitals);  // 首字节时间

// 自定义性能标记
performance.mark('api-start');
const data = await fetch('/api/data');
performance.mark('api-end');
performance.measure('api-latency', 'api-start', 'api-end');

const [measure] = performance.getEntriesByName('api-latency');
console.log('API 耗时:', measure.duration.toFixed(2) + 'ms');

---

3.3 测试策略：单元测试 + 集成测试

高质量代码离不开完善的测试覆盖。以下是 Angular 推荐的测试实践：

// Vue3 组件测试（Vitest + Vue Testing Library）
import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent, waitFor } from '@testing-library/vue';
import UserCard from './UserCard.vue';

describe('UserCard 组件', () => {
  it('正确渲染用户信息', () => {
    const { getByText } = render(UserCard, {
      props: { name: '张三', email: 'zhang@example.com', role: 'admin' },
    });

    expect(getByText('张三')).toBeInTheDocument();
    expect(getByText('zhang@example.com')).toBeInTheDocument();
    expect(getByText('管理员')).toBeInTheDocument();
  });

  it('点击删除按钮时 emit delete 事件', async () => {
    const { getByRole, emitted } = render(UserCard, {
      props: { name: '李四', email: 'li@example.com', role: 'user' },
    });

    await fireEvent.click(getByRole('button', { name: '删除' }));
    expect(emitted().delete).toBeTruthy();
    expect(emitted().delete[0]).toEqual([{ email: 'li@example.com' }]);
  });

  it('加载状态下显示 Skeleton', () => {
    const { container } = render(UserCard, {
      props: { loading: true },
    });
    expect(container.querySelector('.skeleton')).toBeInTheDocument();
  });
});

// Pinia Store 测试
import { setActivePinia, createPinia } from 'pinia';
import { useUserStore } from '@/stores/user';

describe('UserStore', () => {
  beforeEach(() => setActivePinia(createPinia()));

  it('login 成功后更新 state', async () => {
    const store = useUserStore();
    vi.spyOn(authApi, 'login').mockResolvedValue({
      token: 'mock-token',
      user: { id: 1, name: '测试用户' },
    });

    await store.login('test@example.com', 'password');

    expect(store.isLoggedIn).toBe(true);
    expect(store.user?.name).toBe('测试用户');
    expect(localStorage.getItem('token')).toBe('mock-token');
  });
});

---

3.4 生产部署清单

上线前必检：

检查项	具体内容	优先级
配置安全	密钥不在代码中，用环境变量或 Vault	P0
错误处理	所有 API 有 fallback，不暴露内部错误	P0
日志规范	结构化 JSON 日志，含 traceId	P0
健康检查	/health 接口，K8s readiness/liveness probe	P0
限流保护	API 网关或应用层限流	P1
监控告警	错误率/响应时间/CPU/内存 四大指标	P1
压测验证	上线前跑 10 分钟压测，确认 QPS/延迟	P1
回滚预案	蓝绿部署或金丝雀发布，问题 1 分钟回滚	P1

---

四、常见问题排查

4.1 Angular 内存占用过高？

排查步骤：

1. 确认泄漏存在：观察内存是否持续增长（而非偶发峰值）
2. 生成内存快照：使用对应工具（Chrome DevTools / heapdump / memory_profiler）
3. 比对两次快照：找到两次快照间"新增且未释放"的对象
4. 溯源代码：找到对象创建的调用栈，确认是否被缓存/全局变量/闭包持有

常见原因：

• 全局/模块级变量无限增长（缓存无上限）
• 事件监听器添加但未移除
• 定时器/interval 未清理
• 闭包意外持有大对象引用

4.2 性能瓶颈在哪里？

通用排查三板斧：

1. 数据库：explain 慢查询，加索引，缓存热点数据
2. 网络 IO：接口耗时分布（P50/P90/P99），N+1 查询问题
3. CPU：火焰图（flamegraph）找热点函数，减少不必要计算

---

五、总结与最佳实践

学习 Angular 的正确姿势：

1. 先跑通，再优化：先让代码工作，再根据性能测试数据做针对性优化
2. 了解底层原理：知道框架帮你做了什么，才知道什么时候需要绕过它
3. 从错误中学习：每次线上问题都是提升的机会，认真做 RCA（根因分析）
4. 保持代码可测试：依赖注入、单一职责，让每个函数都能独立测试
5. 关注社区动态：订阅官方博客/Release Notes，及时了解新特性和 Breaking Changes

💬 觉得有帮助？点赞+收藏+关注！持续更新 Angular 实战系列。

---

💬 觉得有用？点赞+收藏+关注！ 后续持续更新《框架迁移避坑》系列，React↔Vue3↔Angular 全覆盖。

标签：Angular | Vue3 | 迁移 | 实战 | 前端