Vue 生态关键库深度集成

VueUse、Vite 与 Nuxt 是 Vue 3 生态中常用的效率与工程化方案。概览见 Vue 基础。

VueUse：组合式工具库

VueUse 提供大量基于 Composition API 的 useXxx 函数，涵盖状态、浏览器 API、动画等场景。

一、常用函数索引

VueUse 是基于 Composition API 的实用工具集合，提供超过 200 个开箱即用的 composable 函数（具体数量以官方站点实时统计为准），涵盖动画、传感器、状态、浏览器 API 等几乎所有前端场景。它最大的价值在于封装了复杂的响应式逻辑，让开发者可以“只用不造”，大幅提升开发效率。

🔌 常用函数快速索引

类别	典型函数	一句话作用
状态	`useLocalStorage`, `useSessionStorage`	与存储同步的响应式状态
动画	`useTransition`, `useRafFn`	数值过渡、rAF 循环
传感器	`useMouse`, `useElementSize`, `useOnline`	鼠标、尺寸、网络状态
交互	`useDark`, `useToggle`, `onClickOutside`	主题、切换、点击外部
工具	`useDebounceFn`, `useThrottleFn`, `useAsyncState`	防抖、节流、异步状态
网络	`useFetch`	请求封装；Nuxt 项目须与内置 `useFetch` 区分
历史	`useRefHistory`	ref 变更历史（撤销/重做）

这些函数都遵循 Vue 官方组合式函数的最佳实践：通过 useXxx 命名保持统一，内部自动处理副作用清理防止内存泄漏，并提供了完整的 TypeScript 支持。

实战示例：组合多个 VueUse 函数

vue

<script setup lang="ts">
import { useDark, useToggle, useLocalStorage, useDebounceFn } from "@vueuse/core";

// 深色模式：自动读写 localStorage 与 <html class="dark">
const isDark = useDark();
const toggleDark = useToggle(isDark);

// 与 localStorage 双向同步的响应式状态，刷新页面也不丢失
const draft = useLocalStorage("editor-draft", "");

// 防抖保存，300ms 内的连续输入只会触发一次真正的保存
const save = useDebounceFn((content: string) => {
    console.log("saving...", content);
}, 300);
</script>

<template>
    <button @click="toggleDark()">切换主题</button>
    <textarea v-model="draft" @input="save(draft)" />
</template>

按需引入即可，无需手动处理 window/localStorage 兼容性和清理逻辑，VueUse 内部已经在组件卸载时自动移除监听器。

Vite 与 Vue 的集成

二、@vitejs/plugin-vue

Vite 作为构建工具，它与 Vue 的深度集成主要体现在 @vitejs/plugin-vue 插件上。

🏗️ 核心机制

插件的核心任务是将 .vue 文件编译成浏览器可执行的 JavaScript 模块。它主要做了三件事：

编译模板：调用 @vue/compiler-sfc 将 <template> 转换为 render 函数。
处理脚本：解析 <script setup> 等语法，并提取出模块的导出。
生成模块：生成一个“门面模块”，它将组件的脚本、模板、样式等部分分别导入，然后再组装成一个完整的 Vue 组件对象。

这种设计使得修改 script、template 或 style 可以在不影响其他部分的情况下单独更新。

🔥 热模块替换 (HMR)

Vite 的 HMR 机制非常精细。它通过维护一个描述符缓存，当我们修改一个 SFC 文件时，系统会通过比较算法判断变更范围，从而确定最小更新集合：

修改 <template>：仅替换组件的 render 函数，组件状态得以保留。
修改 <style>：只更新 CSS 内容，组件不会重新渲染。
修改 <script>：逻辑变更会影响状态，这时会触发组件的“软更新”。

🚀 请求拦截与重写

当浏览器请求一个 .vue 文件时，Vite 的插件会拦截请求，并重写到对应的模块上，例如将 App.vue 的请求重写为对 App.vue?vue&type=script、App.vue?vue&type=template 等资源的依赖请求。这使得 Vite 无需像 Webpack 那样将所有模块打包，天生就能实现按需编译和极快的冷启动速度。

Nuxt.js 概览

三、Nuxt 3

Nuxt 是一个构建于 Vue 之上的全栈框架，它通过约定优于配置的方式，解决了 Vue 项目在路由、SSR、构建等方面的诸多痛点。

📜 路由：文件即路由

Nuxt 的核心特性之一是基于文件系统的自动路由。pages/ 目录下的结构直接映射为应用的路由。

/pages/index.vue → 路由 /
/pages/about.vue → 路由 /about
/pages/user/[id].vue → 动态路由 /user/:id
/pages/user/[id]/settings.vue → 嵌套路由 /user/:id/settings

🚀 数据：useFetch & useAsyncData

Nuxt 3 提供了强大的数据获取方式，核心是 useAsyncData 和 useFetch，它们专为 SSR 设计和优化。

$fetch：底层 HTTP 请求库，它是同构的，可以在客户端和服务器端使用，但本身不处理 SSR 数据同步。
useAsyncData：通用异步数据获取工具，可以处理任何异步操作，并能将服务器端获取的数据序列化后传给客户端，实现数据同步。
useFetch：它是 useAsyncData 和 $fetch 组合而成的语法糖，专门用于从 API 端点获取数据，是最简单的数据获取方式。

使用这些 composables 时，它们会返回 data、pending、error、refresh 等响应式属性，便于处理数据加载的各个阶段。

🏎️ 渲染：SSR vs SSG

Nuxt 提供了混合渲染模式，支持在同一项目中为不同路由配置不同的渲染策略。

服务端渲染 (SSR)：每个请求在服务端实时渲染 HTML 后返回，优势在于 SEO 友好和首屏加载快，但需要服务器资源。
静态站点生成 (SSG)：在构建时生成所有页面的静态 HTML，优势是性能极佳且可部署在 CDN 上，但构建时间会随页面数量线性增长。

Nuxt 3 底层的 Nitro 引擎 提供了更易配置的混合渲染能力。你可以在 nuxt.config.ts 中使用 routeRules 按路径配置，灵活性极高。

// nuxt.config.ts
export default defineNuxtConfig({
    routeRules: {
        "/": { prerender: true }, // 首页：构建时预渲染
        "/blog/**": { swr: 3600 }, // 博客：增量静态再生，1 小时后台重新生成
        "/admin/**": { ssr: false }, // 后台：纯客户端渲染，跳过 SSR
    },
});

📦 模块生态

Nuxt 的另一大优势是丰富的官方/社区模块（nuxt.config.ts 的 modules 字段），例如 @nuxt/content（本站文档系统基于此构建）、@nuxt/image、@pinia/nuxt 等，安装后通常零配置即可使用对应的 composables 和构建优化。

常见坑

VueUse 的浏览器 API 在 SSR 下报错：如 useLocalStorage、window 相关函数在服务端渲染阶段不可用，需配合 <ClientOnly> 或检查 import.meta.client。
@vitejs/plugin-vue 与旧版 Babel 插件混用：不要同时引入 vue-loader/Babel 的 Vue 转换逻辑，Vite 项目应完全交给该插件处理 SFC 编译。
Nuxt useFetch 重复请求：在多个组件里对同一个 URL 调用 useFetch 若不传 key，可能因缓存 key 冲突或不去重导致意外的多次请求，建议显式传入 key。
混合渲染规则顺序：routeRules 按路径最长匹配优先，规则冲突时容易得到与预期不同的渲染模式，改动后建议用 nuxi analyze 或构建日志核对。

最佳实践

VueUse 函数优先按需自动导入（Nuxt 默认支持，Vite 项目可用 unplugin-auto-import），避免手写大量 import。
生产构建前用 vite build --mode production 结合 rollup-plugin-visualizer 一类工具检查产物体积。
Nuxt 项目中数据获取统一走 useFetch/useAsyncData，避免在 onMounted 里裸调 fetch 导致 SSR/CSR 数据不一致（Hydration Mismatch）。
对无需 SEO、纯交互的路由（如后台管理系统）用 ssr: false 换取更简单的部署与调试体验。

总结

VueUse：组合式工具函数集合，按需引入，注意 SSR 环境下的浏览器 API 限制。
Vite + @vitejs/plugin-vue：开发与生产构建，SFC 与细粒度 HMR。
Nuxt：基于 Vue 的全栈框架，支持 SSR/SSG 与 routeRules 混合渲染，模块生态丰富。

参考文献

以下链接在编写时均可正常访问：

资料	说明
VueUse 文档	函数索引
Vite 文档	中文
@vitejs/plugin-vue	Vue 插件
Nuxt 文档	中文