Vue 2：错误处理、跨域、内置组件与插件
一、Vue 侧错误处理体系
层级
- 全局：
Vue.config.errorHandler—— 捕获组件树内_render、生命周期、事件处理等同步错误（文档亦说明对 Promise/setTimeout 内的错覆盖不全）。 - 组件：
errorCaptured—— 沿子树向上冒泡，返回false可阻止继续上传。 - 路由：
router.onError—— 异步 chunk 加载失败等。 - 原生：
window.onerror、unhandledrejection（Promise 未捕获）等。
异步代码
- Promise：
.catch。 - async/await：
try/catch包住 await。 - 定时器：在回调内部 try/catch。
接口错误
axios 响应拦截器统一处理业务码 / HTTP 状态。
二、跨域与解决方案
同源三要素
协议、主机、端口一致。
开发环境
webpack devServer.proxy 或 Vite server.proxy，把 /api 转发到后端，浏览器只看到同源。
生产环境
- Nginx 反向代理：同源路径转发到内部服务。
- 后端 CORS：
Access-Control-Allow-*头。
核心：开发用代理「骗过浏览器同源」；上线用网关或 CORS 合法放开。
三、内置组件
文档列举：transition、transition-group、component、keep-alive、Suspense（Vue 3）、Teleport（Vue 3）、插槽等。
transition 类名（Vue 2 / 3 通用思路）
进入/离开六个阶段类名（Vue 3 推荐 *-from / *-to 命名），配合 CSS transition。
动态组件 <component :is="..." />
在多个组件间切换；默认切换会销毁/重建，配合 keep-alive 可缓存。
Teleport / Suspense
属 Vue 3 内置能力；Vue 2 项目需插件或自实现门户挂载。
四、组件 vs 插件
| 组件 | 插件 | |
|---|---|---|
| 目的 | 复用 UI 与局部逻辑 | 扩展应用级能力 |
| 注册 | 局部/全局 component | Vue.use / app.use |
| 例子 | 表单、列表卡片 | Router、Vuex、UI 库、i18n |
插件典型 install(app, options)：注入全局属性、指令、组件、provide 等（文档示例为 Vue 3 createApp 写法，Vue 2 则为 Vue.use）。
五、小结
- 错误：分层捕获 + 异步单独处理 + 上报管道。
- 跨域：开发代理、生产网关/CORS。
- 内置组件：动画、动态组件、缓存；Vue 3 另有传送门、Suspense。
- 插件：横切全局能力与组件复用分层。
至此 Vue 2 合并篇告一段落；Vue 3 见同级目录 vue3。