Vue 3：TypeScript、服务端渲染与错误处理

一、TypeScript

1. 优先 <script setup lang="ts">。
2. ref<T>、reactive<T> 等泛型标注。
3. tsconfig 的 include/paths 配好，保证模板与类型声明覆盖。

（复杂类型推断可结合 vue-tsc 做 CI 校验。）

---

二、服务端渲染 SSR

流程拆分

1. 服务端：createSSRApp、路由匹配、数据预取、@vue/server-renderer 生成 HTML。
2. 客户端：携带打包 JS hydrate 接管交互，而不是重新 mount 一整棵树。

CSR vs SSR

• CSR：首屏空壳 + JS，SEO/首屏弱。
• SSR：首屏 HTML 完整，利于 SEO；服务端成本上升。

实践框架

Nuxt、或自建 Node（Express/Koa）集成。

注意

• VNode 需两端一致才能 hydration。
• 全局状态需 序列化注入（如 window.__INITIAL_STATE__）。
• 路由配置前后端共用。

---

三、错误处理

全局

• app.config.errorHandler：Vue 渲染/生命周期等路径。
• 搭配 window.onerror、unhandledrejection 覆盖非 Vue 路径。

组件

• onErrorCaptured：局部降级 UI。

路由

• router.onError：chunk 加载失败等。

异步

• Promise .catch；async/await + try/catch。

---

四、小结

• TS：<script setup> + 泛型 + 构建检查。
• SSR：渲染 → hydrate → 状态注水。
• 错误：分层兜底 + 上报管道。

如需 Pinia / Vue Router 扩展问答，见 07-附录。