跳到主要内容

Vue 生态（Pinia / Vue Router / Nuxt）

Vue 生态核心面经​

1. Pinia（替代 Vuex）​

核心概念

export const useUserStore = defineStore('user', () => {
  const name = ref('Alice')
  const double = computed(() => name.value.repeat(2))
  async function fetchUser(id: string) {
    name.value = await api.getUser(id)
  }
  return { name, double, fetchUser }
})
对比Vuex 4Pinia
TypeScript较弱完整支持
模块化namespace每个 store 独立
Mutations必须不需要，直接修改
DevTools支持支持（更好）
  • $patch：批量修改状态，触发一次订阅
  • $subscribe：监听 store 变化（类似 vuex 的 subscribe）
  • 插件系统：可扩展 store（如持久化插件 pinia-plugin-persistedstate）

2. Vue Router 4​

导航守卫执行顺序

触发导航
→ 全局 beforeEach
→ 路由独享 beforeEnter
→ 组件 beforeRouteUpdate（复用组件）
→ 组件 beforeRouteEnter
→ 全局 afterEach
→ beforeRouteEnter 的 next(vm => ...) 回调

动态路由

router.addRoute({ path: '/admin', component: Admin })
router.removeRoute('admin') // 通过 name 删除
  • 路由懒加载：component: () => import('./views/Home.vue')
  • 滚动行为：scrollBehavior(to, from, savedPosition) 自定义
  • 路由元信息：meta: { requiresAuth: true } 配合守卫做权限控制

3. Nuxt 3 核心​

目录结构约定

pages/          → 自动生成路由
components/     → 自动导入组件
composables/    → 自动导入 composables
server/api/     → 服务端 API 路由
plugins/        → 客户端/服务端插件
middleware/     → 路由中间件

数据获取

// useFetch：SSR + CSR 通用，自动序列化
const { data } = await useFetch('/api/users')

// useAsyncData：更灵活的异步数据
const { data } = await useAsyncData('users', () => $fetch('/api/users'))
  • Nitro 引擎：Nuxt 3 服务端，支持多部署目标（Node/Vercel/CF Workers）
  • Island Architecture：<NuxtIsland> 服务端渲染的交互组件
  • SEO：useHead / useSeoMeta 管理 meta 标签

4. VueUse​

常用 composables：

  • useStorage — localStorage/sessionStorage 响应式绑定
  • useFetch — 简单请求封装
  • useIntersectionObserver — 懒加载/埋点
  • useEventListener — 自动清理的事件绑定
  • useVModel — 简化 v-model 实现

5. 高频面试题​

  • Pinia 如何实现跨 store 通信？ 在一个 store 中直接导入并使用另一个 store
  • Vue Router history 模式需要服务器配置什么？ 所有路径返回 index.html，避免 404
  • Nuxt SSR 如何避免服务端/客户端数据不一致（hydration mismatch）？ 避免在服务端使用 window/document，用 onMounted 隔离客户端逻辑
  • Vue 项目如何做权限控制？ 路由 meta + 全局守卫 + 动态添加路由 + 指令（v-permission）