斌の顶级理解

Improve a little bit every day.

0%

2025年的Vue

发表于 更新于

本文将重点解读几款 Vue 生态内的重要工具的新版本动态，包括 Nuxt v4、Vite v6、Vitest v3 和 Pinia v3。同时，我们还会介绍当前正在探索中的 Vue Vapor 模式。

Nuxt 4

虽然 Nuxt v4 目前还没有确定的发布日期，但它的一些新特性已经可以在现有的 Nuxt v3 中试用。只需在配置文件中进行简单设置，即可提前体验 Nuxt v4 的未来功能：

1
2
3
4
5
6
7
// /nuxt.config.js
export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4
  },
  // ...其他配置
})

请确保你正在使用 Nuxt v3.12 或更高版本。此外，从 v3.13 版本开始，部分 Nuxt 4 特性会默认启用。

Vite 6

Vite 是众多前端框架构建过程中的核心工具，支持了无数现代 Web 应用的开发。最新发布的 Vite v6 带来了全新的环境 API，这项特性规范了 JavaScript 在客户端、服务端乃至边缘计算环境下的运行方式。虽然大多数开发者不会直接调用这一 API，但它为框架和插件的开发者提供了强大支持。

另外，Vite 正在由 Rollup 向全新构建工具 Rolldown 过渡。Rolldown 旨在替代 Rollup，以提供更快的构建速度和更高的内存效率，对于大型应用尤为重要。不过，目前 Vite v6 依然使用 Rollup 作为打包器。

Vitest 3

目前 Vitest 已经发布到了 v2.1 版本，而基于 Vite 的快速迭代，Vitest 计划在 2025 年 1 月推出 v3 版本，以匹配 Vite 的新版本。从功能角度看，Vitest v3 与原本计划中的 “Vitest v2.2” 基本一致。

值得注意的是，Vitest 提供了一个 Node API，可以让你通过 Node.js 程序运行测试，不过这一功能在 v2.1 版本中仍处于实验阶段。预计在 v3.0 中仍为实验特性，但团队计划在 v3.1 中使其稳定化。

Pinia 3

作为 Vue 官方推荐的状态管理工具，Pinia 的 API 自 v1 起就非常稳定，而 Pinia v3 也延续了这一传统。你依然可以通过 defineStore 定义 store，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { defineStore } from 'pinia'

export const useSampleStore = defineStore('sample', {
  state() {
    return { text: '' }
  },
  getters: {
    uppercase(state) {
      return state.text.toUpperCase()
    }
  },
  actions: {
    setText(val) {
      this.text = val
    }
  }
})

或者采用 Composition API 的写法：

1
2
3
4
5
6
7
8
export const useSampleStore = defineStore('sample', () => {
  const text = ref('')
  const uppercase = computed(() => text.value.toUpperCase())
  const setText = (val) => {
    text.value = val
  }
  return { text, uppercase, setText }
})

Pinia v3 的最大变化在于它将不再支持 Vue v2，这意味着如果你打算使用 Pinia v3，就必须将项目升级到 Vue v3。

Vapor 模式

Vue 的 Vapor 模式目前仍处于研发阶段。如果你还不熟悉这一概念，可以这样理解：传统的 Vue 在每次组件状态变化时都会生成一个新的虚拟 DOM，然后通过对比前后两个虚拟 DOM（diffing）来确定更新的部分。而 Vapor 模式则试图跳过虚拟 DOM 的生成和对比过程，通过在编译时就确定好需要更新的部分，从而使得响应式更新更加高效。

这一模式的目标是解决当页面上存在大量频繁更新的响应式元素时可能出现的性能瓶颈。虽然 Vapor 模式尚未成熟，但你已经可以通过 vue-vapor 项目进行实验。由于其设计为“即插即用”的性能升级方案，你无需对现有 Vue 组件做出改动，但要求组件必须采用 Composition API 语法。

Tsdown

这是一个由 Rolldown 驱动的快速打包工具，主要为 TypeScript 库提供更快的打包方案。它和 tsup 功能类似，但借助 Rolldown 的性能优势，同时支持 Rollup 和 Vite 插件。Tsdown 目前还在开发中，还没有准备好用于生产环境。

Tsup 是基于 esbuild 的快速打包工具，专为需要快速迭代的 TypeScript 项目设计，适用于库开发、工具脚手架或轻量级应用打包。

Rolldown 和 Tsdown 的开发目标是逐步替换现有打包工具（如 Rollup 和 esbuild），提供更高效的构建方案。

核心功能
  • 速度快：Tsdown 基于用 Rust 开发的 Rolldown，Rolldown 官方称比 Rollup 快 10-30 倍，适合大型项目快速打包。
  • 插件兼容：通过 Rolldown 的 Rollup 兼容接口，支持 Rollup 和 Vite 插件，开发者可以直接使用现有插件。
  • TypeScript 优化：开箱即用，支持 CJS 和 ESM 格式。通过 unplugin-isolated-decl（基于 Oxc）快速生成 .d.ts 类型文件。
  • 依赖处理：能高效管理外部依赖和同级依赖，保持输出包体积精简。
  • 迁移方便：兼容 tsup 的命令行参数，支持复用 Vite/Vitest 配置文件。
与其他工具对比
  • 和 tsup 相比：Tsdown 使用 Rolldown 的 Rust 性能，速度可能更快，且支持更多插件。
  • 和 esbuild 相比：在保持高速的同时，弥补了 esbuild 插件生态不足的问题。
  • 和 Rollup 相比：保留了 Rollup 的插件系统，但性能显著提升。
里程碑
  • 2024年6月：首次发布，实现与 tsup 功能对齐，支持 CJS/ESM 输出和依赖优化。
  • 2025年4月：已经整合到 Rolldown 生态，未来将成为 Vite 迁移 Rolldown 后的技术基础。
适用场景
  • 为需要类型定义的库/框架提供高效构建
  • 与 Rolldown、Vite 等工具链配合使用
小结

Tsdown 是基于 Rolldown 的高性能打包工具，整合了速度、兼容性和 TypeScript 支持的优势。虽然目前还不成熟，但它的潜力值得关注。当 Rolldown 和 Tsdown 进一步完善后，可能会改变 JavaScript 和 TypeScript 的开发工具格局，尤其是在 Vite 生态中。

Vue 在 2025 年的整体趋势

总体来说，2025 年不会对 Vue 开发流程产生颠覆性影响，但我们可以预见生态系统中的各个工具将持续进化，稳定性也在不断增强。相比过去几年，Vue 的语法和 API 变动已经大为减少，这意味着在升级新版本时，你不必担心大范围的不兼容问题。

这篇文章详细介绍了 Nuxt、Vite、Vitest、Pinia 以及 Vapor 模式在未来一年的发展方向。只要及时调整你的开发环境并熟悉这些新特性，你就能在 Vue 的生态中始终保持领先地位。

-------------本文结束感谢您的阅读-------------