Inertia.js v3 Beta 上线！Laravel 前端神器迎来重大升级

大家好！作为 Laravel 生态的一员，Inertia.js 一直是我们构建现代前端应用的利器。它能让 Vue、React 或 Svelte 与 Laravel 无缝协作，实现 SPA-like 的体验，而不用写一堆 API 端点。最近，Laravel 创始人 Taylor Otwell 在 X（原 Twitter）上发布了一个长线程，宣布 Inertia.js v3 beta 版正式上线！这波更新堪称“重磅”，包括全新 Vite 插件、简化 SSR、乐观更新等功能，旨在让开发更高效、更优雅。

本文结合 Taylor 的线程内容、官方博客（https://laravel.com/blog/inertiajs-v3-is-now-in-beta）和升级指南（https://inertiajs.com/docs/v3/getting-started/upgrade-guide），为大家梳理 v3 的亮点和迁移注意事项。如果你是 Laravel + Inertia 的忠实用户，别错过这个版本——它可能会彻底改变你的开发流程。

v3 Beta 的核心亮点：开发体验大飞跃

Inertia.js v3 聚焦于简化配置、提升交互性和减少依赖。Taylor 在线程中强调，这是“一个大版本”，并逐一展示了新功能。官方博客也详细阐述了这些变化，让我们来逐一拆解（附带代码示例，基于 Vue3 适配器）。

1. 全新 Vite 插件：一键搞定页面解析和 SSR

亮点：新插件 @inertiajs/vite 自动处理页面解析、懒加载、代码拆分和 SSR 设置。你只需一个简单的 createInertiaApp() 调用，不用传任何参数。
为什么牛：开发中 SSR 不再需要单独的 Node.js 服务器。只需运行 composer dev，页面就能服务器端渲染。生产环境保持原有构建流程，但错误报告更友好（包含组件名、URL 和提示）。
代码示例（入口文件）：

// vite.config.js
import inertia from "@inertiajs/vite";
import laravel from "laravel-vite-plugin";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    laravel({
      input: ["resources/css/app.css", "resources/js/app.js"],
      refresh: true,
    }),
    inertia(),
  ],
});

// resources/js/app.js
import { createInertiaApp } from "@inertiajs/vue3";

createInertiaApp();

这简化了 Vite 配置，适合新手快速上手。

2. useHttp 钩子：独立 HTTP 请求更强大

亮点：类似于 useForm，但专为普通 HTTP 请求设计。支持响应式状态、错误处理、文件上传进度和请求取消，不会触发页面跳转。
应用场景：如上传文件或后台 API 调用，而不打断用户界面。
代码示例：

import { useHttp } from "@inertiajs/vue3";

const { data, errors, processing, progress, send } = useHttp();

send("post", "/upload", {
  file: selectedFile,
  onProgress: (event) => console.log(event),
});

3. 内置乐观更新（Optimistic Updates）

亮点：在路由访问前链式调用 optimistic()，立即更新 UI（如点赞计数 +1）。请求失败时自动回滚，支持并发请求。
为什么实用：提升用户感知速度，避免“等待感”。
代码示例：

router.visit("/posts/1/like", {
  method: "post",
  optimistic: (props) => {
    props.post.likes_count++;
  },
});

4. 即时访问（Instant Visits）

亮点：立即渲染目标页面组件（使用共享 props），后台发服务器请求。响应回来后数据无缝合并。
优势：用户先看到新页面，减少白屏时间。
代码示例：

router.visit("/dashboard", { instant: true });

5. useLayoutProps 钩子：布局 props 更灵活

亮点：布局组件可定义默认 props，页面用 setLayoutProps() 更新。支持嵌套布局，无需事件总线。
代码示例（布局组件）：

import { useLayoutProps } from "@inertiajs/vue3";

const props = useLayoutProps({
  title: "Default Title",
});

6. 自定义错误页面和异常处理

亮点：handleExceptionsUsing() 方法允许渲染自定义 Inertia 错误页，带完整共享数据。全局事件重命名（invalid → httpException，exception → networkError）。
安全提升：更细粒度的错误控制。

7. 替换 Axios：内置 XHR 客户端

亮点：移除 Axios 依赖，bundle 更小。内置 XHR 支持拦截器，Axios 适配器可选。
其他小功能：嵌套 prop 类型支持点符号、TypeScript 泛型表单组件、PHP enum 支持、preserveErrors 选项等。

这些功能让 Inertia v3 更“现代”，减少 boilerplate 代码，专注于业务逻辑。

升级指南：从 v2 到 v3 的迁移注意事项

v3 引入了一些 breaking changes，需要仔细迁移。官方升级指南强调逐步操作，避免直接跳跃。

升级步骤

更新依赖：
- 客户端适配器：

npm install @inertiajs/vue3@^3.0.0-beta

（React/Svelte 同理）

Vite 插件（可选）：

npm install @inertiajs/vite@^3.0.0-beta

Laravel 适配器：

composer require inertiajs/inertia-laravel:^3.0.0-beta`

发布新配置：

配置文件结构变了,需要重新发布：

php artisan vendor:publish --provider="Inertia\\ServiceProvider" --force`

清除视图缓存：

@inertia 指令输出有变化

php artisan view:clear

测试运行：

运行 npm run dev 或 composer dev，检查 SSR 和请求。

Breaking Changes 和关键差异

最低要求：PHP 8.2+、Laravel 11+、React 19+ 或 Svelte 5+（需 runes 语法）。
HTTP 客户端：移除 Axios 和 qs 依赖。迁移拦截器到内置 XHR，或用 Axios 适配器。
事件重命名：全局事件加 inertia: 前缀，invalid → httpException，exception → networkError。
请求取消：router.cancel() → router.cancelAll()（支持过滤）。
懒加载 props：移除 Inertia::lazy()，用 Inertia::optional() 替代。
配置结构：testing 简化，页面设置移到 pages 下。
测试：移除旧 traits，用 AssertableInertia 类。
SSR 开发：无需单独服务器，靠 Vite 插件自动处理。
其他：移除 future 选项（全默认启用）、progress 方法重命名、React deferred 组件 fallback 行为变化、ESM-only 支持（不再兼容 CommonJS require）。

迁移提示：先检查事件监听器和表单重置逻辑（现在在 onFinish 回调）。如果用 lazy props，快速替换 optional()。Svelte 用户注意升级到 runes 语法。整体上，v3 更精简，bundle 减小，但需手动处理 qs 如果依赖深。

结语：Inertia v3，Laravel 前端的更上一层楼

Inertia.js v3 beta 不只是功能堆砌，而是对开发者痛点的精准解决——从 SSR 简化到乐观更新，都在让构建应用更流畅、更高效。作为中文社区的开发者，如果你正用 Laravel + Vue/React，这绝对值得一试！Taylor 在线程中呼吁大家反馈 beta 版，赶紧安装测试，分享你的体验吧。

官方资源：

博客公告：https://laravel.com/blog/inertiajs-v3-is-now-in-beta
升级指南：https://inertiajs.com/docs/v3/getting-started/upgrade-guide
GitHub：https://github.com/inertiajs/inertia

欢迎在评论区讨论你的迁移心得，或如果有问题，一起交流！🚀