如果你正在从 Vue2 转向 Vue3或者已经在 Vue3 项目中摸爬滚打了一段时间却总感觉对 Composition API、Pinia、Router 这些核心概念的理解停留在表面——这篇文章就是为你准备的。很多开发者以为 Vue3 只是语法变了但实际上这是一次开发范式的彻底升级。Composition API 不只是替代 Options API 的另一种写法它改变了我们组织代码逻辑的方式Pinia 也不仅仅是 Vuex 的替代品它提供了更直观的状态管理体验而 Vue Router 在 Vue3 中的变化更是直接影响着页面性能和用户体验。本文将带你深入 Vue3 的核心三件套通过实际案例展示如何避免常见的坑点构建可维护的大型应用。无论你是准备面试还是提升项目质量这里都有你需要的实战经验。1. 为什么 Vue3 值得深入学习Vue3 自 2020 正式发布以来已经成为了前端开发的主流选择。但很多开发者对其认知仍停留在性能更好的层面实际上 Vue3 带来的改变远不止于此。性能提升只是表象开发体验的革新才是核心。Composition API 让逻辑关注点更加集中而不是分散在各个选项中。想象一下在 Vue2 中处理一个用户认证逻辑你需要在 data 中定义状态在 methods 中定义方法在 computed 中定义计算属性在 mounted 中处理初始化。而在 Vue3 中所有相关的逻辑可以组织在同一个函数中大大提升了代码的可读性和可维护性。TypeScript 支持从可用变成了优秀。Vue3 的源码完全用 TypeScript 重写提供了更完善的类型推断。这意味着你在开发时能获得更好的智能提示和类型检查减少运行时错误。生态系统已经成熟。Pinia 作为官方推荐的状态管理库相比 Vuex 有更简单的 API 和更好的 TypeScript 支持。Vue Router 4 也针对 Vue3 进行了优化提供了更好的组合式 API 集成。如果你还在犹豫是否要深入学习 Vue3现在就是最佳时机——市场需求已经从会 Vue2转向精通 Vue3而真正理解其核心原理的开发者仍然稀缺。2. Composition API 深度解析2.1 从 Options API 到 Composition API 的思维转变很多开发者刚开始接触 Composition API 时容易陷入一个误区认为这只是另一种组织代码的方式。实际上这是从选项式思维到函数式思维的转变。在 Options API 中代码按照选项类型分组script export default { data() { return { count: 0, user: null } }, computed: { doubleCount() { return this.count * 2 } }, methods: { increment() { this.count } }, mounted() { this.fetchUser() } } /script在 Composition API 中代码按照逻辑关注点组织script setup import { ref, computed, onMounted } from vue // 计数器逻辑 const count ref(0) const doubleCount computed(() count.value * 2) const increment () count.value // 用户逻辑 const user ref(null) const fetchUser async () { user.value await fetch(/api/user).then(r r.json()) } onMounted(() { fetchUser() }) /script这种组织方式让相关的逻辑聚集在一起当组件复杂时你甚至可以提取自定义组合式函数// composables/useCounter.js export function useCounter(initialValue 0) { const count ref(initialValue) const doubleCount computed(() count.value * 2) const increment () count.value return { count, doubleCount, increment } } // composables/useUser.js export function useUser() { const user ref(null) const fetchUser async (id) { user.value await fetch(/api/users/${id}).then(r r.json()) } return { user, fetchUser } }2.2 ref 和 reactive 的正确使用场景这是 Composition API 中最容易混淆的概念之一。简单来说ref用于基本类型string, number, boolean和对象引用reactive仅用于对象但实际选择时有更实用的判断标准import { ref, reactive } from vue // 适合用 ref 的情况 const count ref(0) // 基本类型 const user ref(null) // 可能为 null 的对象引用 const loading ref(false) // 布尔值 // 适合用 reactive 的情况 const form reactive({ name: , email: , age: 0 }) // 总是存在的表单对象 const config reactive({ apiUrl: https://api.example.com, timeout: 5000 }) // 配置对象关键区别ref需要通过.value访问值而reactive可以直接访问属性。在模板中ref 会自动解包所以不需要写.value。2.3 生命周期钩子的变化Vue3 的生命周期钩子都带有on前缀并且可以在 setup 中多次调用script setup import { onMounted, onUpdated, onUnmounted } from vue onMounted(() { console.log(第一个 mounted 钩子) // 初始化操作 }) onMounted(() { console.log(第二个 mounted 钩子) // 其他初始化操作 }) onUpdated(() { console.log(组件更新了) }) onUnmounted(() { console.log(组件卸载前的清理工作) }) /script这种设计让相关的生命周期逻辑可以组织在一起而不是分散在组件选项中。3. Pinia 状态管理实战3.1 Pinia 与 Vuex 的核心差异Pinia 不是 Vuex 5而是一个全新的状态管理库。其主要优势在于更简单的 API没有 mutations只有 state、getters、actions完美的 TypeScript 支持完全的类型推断模块化设计每个 store 都是自动分割的组合式 API 友好与 Vue3 的 Composition API 完美结合3.2 定义 Store 的两种方式根据 Pinia 官方文档定义 store 有两种方式Option Store 和 Setup Store。Option Store类似 Vuex// stores/counter.js import { defineStore } from pinia export const useCounterStore defineStore(counter, { state: () ({ count: 0, name: 计数器 }), getters: { doubleCount: (state) state.count * 2, // 使用其他 getters doubleCountPlusOne() { return this.doubleCount 1 } }, actions: { increment() { this.count }, async fetchData() { const data await fetch(/api/data) this.count await data.json() } } })Setup Store类似 Composition API// stores/counter.js import { defineStore } from pinia import { ref, computed } from vue export const useCounterStore defineStore(counter, () { const count ref(0) const name ref(计数器) const doubleCount computed(() count.value * 2) const doubleCountPlusOne computed(() doubleCount.value 1) function increment() { count.value } async function fetchData() { const data await fetch(/api/data) count.value await data.json() } return { count, name, doubleCount, doubleCountPlusOne, increment, fetchData } })选择建议如果你来自 Vuex 背景Option Store 会更熟悉如果你习惯 Composition APISetup Store 会更自然。两者在功能上是等价的。3.3 在组件中使用 Storescript setup import { useCounterStore } from /stores/counter import { storeToRefs } from pinia const counterStore useCounterStore() // 直接访问 state console.log(counterStore.count) // 调用 action counterStore.increment() // 使用 getter console.log(counterStore.doubleCount) // 如果需要解构并保持响应性使用 storeToRefs const { count, doubleCount } storeToRefs(counterStore) // actions 可以直接解构因为它们绑定到 store const { increment } counterStore /script template div p计数: {{ counterStore.count }}/p p双倍计数: {{ counterStore.doubleCount }}/p button clickcounterStore.increment增加/button /div /template3.4 持久化状态配置在实际项目中我们经常需要持久化某些状态如用户登录信息。推荐使用pinia-plugin-persistedstatenpm install pinia-plugin-persistedstate// main.js import { createApp } from vue import { createPinia } from pinia import piniaPluginPersistedstate from pinia-plugin-persistedstate const app createApp(App) const pinia createPinia() pinia.use(piniaPluginPersistedstate) app.use(pinia)在 store 中配置持久化export const useUserStore defineStore(user, { state: () ({ token: , userInfo: null }), persist: { enabled: true, strategies: [ { key: user, storage: localStorage, paths: [token] // 只持久化 token } ] } })4. Vue Router 4 路由管理4.1 路由定义与导航守卫Vue Router 4 最大的变化是创建路由实例的方式// router/index.js import { createRouter, createWebHistory } from vue-router const routes [ { path: /, name: Home, component: () import(/views/Home.vue), meta: { requiresAuth: true } }, { path: /login, name: Login, component: () import(/views/Login.vue) }, { path: /user/:id, name: User, component: () import(/views/User.vue), props: true // 将路由参数作为 props 传递 } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from) { const userStore useUserStore() if (to.meta.requiresAuth !userStore.token) { return { name: Login } } }) export default router4.2 组合式 API 中使用路由在 Composition API 中我们使用useRouter和useRoutescript setup import { useRouter, useRoute } from vue-router const router useRouter() const route useRoute() // 编程式导航 const goToUser (userId) { router.push({ name: User, params: { id: userId } }) } // 获取当前路由参数 const userId computed(() route.params.id) // 监听路由变化 watch( () route.params.id, (newId) { fetchUser(newId) } ) /script4.3 解决路由参数变化页面不刷新的问题这是 Vue Router 常见的痛点当从/user/1导航到/user/2时组件不会重新创建。解决方案script setup import { watch } from vue import { useRoute } from vue-router const route useRoute() const userData ref(null) // 方法1监听 params 变化 watch( () route.params.id, async (newId) { userData.value await fetchUser(newId) }, { immediate: true } // 立即执行一次 ) // 方法2使用 onBeforeRouteUpdate 导航守卫 import { onBeforeRouteUpdate } from vue-router onBeforeRouteUpdate(async (to, from) { if (to.params.id ! from.params.id) { userData.value await fetchUser(to.params.id) } }) /script template !-- 方法3为 router-view 添加 key -- router-view :keyroute.fullPath / /template5. 项目实战构建用户管理系统让我们通过一个完整的用户管理系统将所学知识整合起来。5.1 项目结构设计src/ ├── components/ # 可复用组件 │ ├── UserForm.vue │ └── UserList.vue ├── composables/ # 组合式函数 │ ├── useApi.js │ └── usePagination.js ├── stores/ # Pinia stores │ ├── user.js │ └── app.js ├── router/ # 路由配置 │ └── index.js ├── views/ # 页面组件 │ ├── Home.vue │ ├── Login.vue │ └── UserManagement.vue └── App.vue5.2 用户状态管理 Store// stores/user.js import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , currentUser: null, users: [] }), getters: { isLoggedIn: (state) !!state.token, getUserById: (state) (id) { return state.users.find(user user.id id) } }, actions: { setToken(token) { this.token token localStorage.setItem(token, token) }, clearToken() { this.token localStorage.removeItem(token) }, async login(credentials) { const response await fetch(/api/login, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(credentials) }) if (response.ok) { const { token, user } await response.json() this.setToken(token) this.currentUser user return true } return false }, async logout() { this.clearToken() this.currentUser null this.users [] }, async fetchUsers() { const response await fetch(/api/users, { headers: { Authorization: Bearer ${this.token} } }) if (response.ok) { this.users await response.json() } } }, persist: { enabled: true, strategies: [ { key: user, storage: localStorage, paths: [token] } ] } })5.3 路由配置与权限控制// router/index.js import { createRouter, createWebHistory } from vue-router const routes [ { path: /, name: Home, component: () import(/views/Home.vue), meta: { requiresAuth: true } }, { path: /login, name: Login, component: () import(/views/Login.vue), meta: { guestOnly: true } }, { path: /users, name: UserManagement, component: () import(/views/UserManagement.vue), meta: { requiresAuth: true, requiresAdmin: true } }, { path: /users/:id, name: UserDetail, component: () import(/views/UserDetail.vue), meta: { requiresAuth: true }, props: true } ] const router createRouter({ history: createWebHistory(), routes }) router.beforeEach((to, from) { const userStore useUserStore() // 检查是否需要认证 if (to.meta.requiresAuth !userStore.isLoggedIn) { return { name: Login, query: { redirect: to.fullPath } } } // 检查是否只允许未登录用户访问 if (to.meta.guestOnly userStore.isLoggedIn) { return { name: Home } } // 检查管理员权限 if (to.meta.requiresAdmin (!userStore.currentUser || !userStore.currentUser.isAdmin)) { return { name: Home } } }) export default router5.4 用户管理页面实现!-- views/UserManagement.vue -- script setup import { onMounted, ref, computed } from vue import { useUserStore } from /stores/user import { usePagination } from /composables/usePagination const userStore useUserStore() const searchQuery ref() // 使用组合式函数处理分页 const { currentPage, pageSize, totalPages, paginatedData } usePagination( computed(() userStore.users), 10 ) // 搜索过滤 const filteredUsers computed(() { if (!searchQuery.value) return userStore.users return userStore.users.filter(user user.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || user.email.toLowerCase().includes(searchQuery.value.toLowerCase()) ) }) onMounted(async () { if (userStore.users.length 0) { await userStore.fetchUsers() } }) const deleteUser async (userId) { if (confirm(确定要删除这个用户吗)) { await fetch(/api/users/${userId}, { method: DELETE, headers: { Authorization: Bearer ${userStore.token} } }) await userStore.fetchUsers() // 重新加载用户列表 } } /script template div classuser-management h1用户管理/h1 div classtoolbar input v-modelsearchQuery placeholder搜索用户... classsearch-input button click$router.push(/users/new) classbtn-primary 添加用户 /button /div table classuser-table thead tr thID/th th姓名/th th邮箱/th th操作/th /tr /thead tbody tr v-foruser in paginatedData :keyuser.id td{{ user.id }}/td td{{ user.name }}/td td{{ user.email }}/td td button click$router.push(/users/${user.id})编辑/button button clickdeleteUser(user.id) classbtn-danger删除/button /td /tr /tbody /table !-- 分页控件 -- div classpagination button :disabledcurrentPage 1 clickcurrentPage-- 上一页 /button span第 {{ currentPage }} 页共 {{ totalPages }} 页/span button :disabledcurrentPage totalPages clickcurrentPage 下一页 /button /div /div /template6. 性能优化与最佳实践6.1 组件懒加载对于大型应用使用路由懒加载可以显著提升初始加载速度// router/index.js const routes [ { path: /admin, name: Admin, component: () import(/* webpackChunkName: admin */ /views/Admin.vue) } ]6.2 状态管理优化避免在 store 中存储过大或不需要响应式的数据// 不推荐存储大量不需要响应式的数据 state: () ({ largeData: [] // 数千条数据会影响性能 }) // 推荐使用 shallowRef 或标记为非响应式 import { shallowRef } from vue export const useDataStore defineStore(data, () { const largeData shallowRef([]) // 浅层响应式 return { largeData } })6.3 计算属性缓存与记忆化合理使用计算属性避免重复计算const expensiveValue computed(() { // 复杂的计算逻辑 return heavyCalculation(someData.value) }) // 对于依赖多个参数的计算使用记忆化 import { computed } from vue function useMemoizedComputed(getter, deps) { return computed(() { // 读取依赖项以确保响应性 deps.forEach(dep dep.value) return getter() }) }7. 常见问题与解决方案7.1 响应式丢失问题// ❌ 错误直接解构会丢失响应性 const { count, name } useCounterStore() // ✅ 正确使用 storeToRefs import { storeToRefs } from pinia const { count, name } storeToRefs(useCounterStore()) // ✅ 正确在模板中直接访问 const store useCounterStore() // 在模板中{{ store.count }}7.2 循环依赖问题当 store 之间需要相互引用时// stores/user.js export const useUserStore defineStore(user, { actions: { async someAction() { // 在函数内引用其他 store避免循环导入 const { useProductStore } await import(/stores/product) const productStore useProductStore() // ... 使用 productStore } } })7.3 TypeScript 类型定义为 store 提供完整的类型支持// types/user.ts export interface User { id: number name: string email: string isAdmin: boolean } // stores/user.ts import { defineStore } from pinia import type { User } from /types/user interface UserState { token: string currentUser: User | null users: User[] } export const useUserStore defineStore(user, { state: (): UserState ({ token: , currentUser: null, users: [] }), getters: { isLoggedIn: (state) !!state.token, getUserById: (state) (id: number) { return state.users.find(user user.id id) } } })8. 从 Vue2 迁移的实用技巧8.1 渐进式迁移策略混合使用在 Vue3 项目中可以使用vue/composition-api插件逐步迁移按组件迁移逐个组件重写而不是一次性重写整个项目工具辅助使用 vue-composition-api-migration-helper 工具8.2 API 映射指南Vue2 Options APIVue3 Composition APIdata()ref()或reactive()methods普通函数computedcomputed()watchwatch()或watchEffect()mounted等生命周期onMounted()等8.3 常见迁移陷阱this 上下文变化Composition API 中不再使用 this生命周期钩子名称变化添加on前缀如mounted→onMounted事件总线模式变化推荐使用mitt或provide/inject替代$on/$emit通过系统学习 Composition API、Pinia 和 Vue Router 的深度集成你不仅能够构建更复杂的 Vue3 应用还能在面试和团队协作中展现出对现代前端开发的深刻理解。真正的进阶不在于记住所有 API而在于理解其设计哲学并能在实际项目中做出合理的技术决策。
如果你正在从 Vue2 转向 Vue3或者已经在 Vue3 项目中摸爬滚打了一段时间却总感觉对 Composition API、Pinia、Router 这些核心概念的理解停留在表面——这篇文章就是为你准备的。很多开发者以为 Vue3 只是语法变了但实际上这是一次开发范式的彻底升级。Composition API 不只是替代 Options API 的另一种写法它改变了我们组织代码逻辑的方式Pinia 也不仅仅是 Vuex 的替代品它提供了更直观的状态管理体验而 Vue Router 在 Vue3 中的变化更是直接影响着页面性能和用户体验。本文将带你深入 Vue3 的核心三件套通过实际案例展示如何避免常见的坑点构建可维护的大型应用。无论你是准备面试还是提升项目质量这里都有你需要的实战经验。1. 为什么 Vue3 值得深入学习Vue3 自 2020 正式发布以来已经成为了前端开发的主流选择。但很多开发者对其认知仍停留在性能更好的层面实际上 Vue3 带来的改变远不止于此。性能提升只是表象开发体验的革新才是核心。Composition API 让逻辑关注点更加集中而不是分散在各个选项中。想象一下在 Vue2 中处理一个用户认证逻辑你需要在 data 中定义状态在 methods 中定义方法在 computed 中定义计算属性在 mounted 中处理初始化。而在 Vue3 中所有相关的逻辑可以组织在同一个函数中大大提升了代码的可读性和可维护性。TypeScript 支持从可用变成了优秀。Vue3 的源码完全用 TypeScript 重写提供了更完善的类型推断。这意味着你在开发时能获得更好的智能提示和类型检查减少运行时错误。生态系统已经成熟。Pinia 作为官方推荐的状态管理库相比 Vuex 有更简单的 API 和更好的 TypeScript 支持。Vue Router 4 也针对 Vue3 进行了优化提供了更好的组合式 API 集成。如果你还在犹豫是否要深入学习 Vue3现在就是最佳时机——市场需求已经从会 Vue2转向精通 Vue3而真正理解其核心原理的开发者仍然稀缺。2. Composition API 深度解析2.1 从 Options API 到 Composition API 的思维转变很多开发者刚开始接触 Composition API 时容易陷入一个误区认为这只是另一种组织代码的方式。实际上这是从选项式思维到函数式思维的转变。在 Options API 中代码按照选项类型分组script export default { data() { return { count: 0, user: null } }, computed: { doubleCount() { return this.count * 2 } }, methods: { increment() { this.count } }, mounted() { this.fetchUser() } } /script在 Composition API 中代码按照逻辑关注点组织script setup import { ref, computed, onMounted } from vue // 计数器逻辑 const count ref(0) const doubleCount computed(() count.value * 2) const increment () count.value // 用户逻辑 const user ref(null) const fetchUser async () { user.value await fetch(/api/user).then(r r.json()) } onMounted(() { fetchUser() }) /script这种组织方式让相关的逻辑聚集在一起当组件复杂时你甚至可以提取自定义组合式函数// composables/useCounter.js export function useCounter(initialValue 0) { const count ref(initialValue) const doubleCount computed(() count.value * 2) const increment () count.value return { count, doubleCount, increment } } // composables/useUser.js export function useUser() { const user ref(null) const fetchUser async (id) { user.value await fetch(/api/users/${id}).then(r r.json()) } return { user, fetchUser } }2.2 ref 和 reactive 的正确使用场景这是 Composition API 中最容易混淆的概念之一。简单来说ref用于基本类型string, number, boolean和对象引用reactive仅用于对象但实际选择时有更实用的判断标准import { ref, reactive } from vue // 适合用 ref 的情况 const count ref(0) // 基本类型 const user ref(null) // 可能为 null 的对象引用 const loading ref(false) // 布尔值 // 适合用 reactive 的情况 const form reactive({ name: , email: , age: 0 }) // 总是存在的表单对象 const config reactive({ apiUrl: https://api.example.com, timeout: 5000 }) // 配置对象关键区别ref需要通过.value访问值而reactive可以直接访问属性。在模板中ref 会自动解包所以不需要写.value。2.3 生命周期钩子的变化Vue3 的生命周期钩子都带有on前缀并且可以在 setup 中多次调用script setup import { onMounted, onUpdated, onUnmounted } from vue onMounted(() { console.log(第一个 mounted 钩子) // 初始化操作 }) onMounted(() { console.log(第二个 mounted 钩子) // 其他初始化操作 }) onUpdated(() { console.log(组件更新了) }) onUnmounted(() { console.log(组件卸载前的清理工作) }) /script这种设计让相关的生命周期逻辑可以组织在一起而不是分散在组件选项中。3. Pinia 状态管理实战3.1 Pinia 与 Vuex 的核心差异Pinia 不是 Vuex 5而是一个全新的状态管理库。其主要优势在于更简单的 API没有 mutations只有 state、getters、actions完美的 TypeScript 支持完全的类型推断模块化设计每个 store 都是自动分割的组合式 API 友好与 Vue3 的 Composition API 完美结合3.2 定义 Store 的两种方式根据 Pinia 官方文档定义 store 有两种方式Option Store 和 Setup Store。Option Store类似 Vuex// stores/counter.js import { defineStore } from pinia export const useCounterStore defineStore(counter, { state: () ({ count: 0, name: 计数器 }), getters: { doubleCount: (state) state.count * 2, // 使用其他 getters doubleCountPlusOne() { return this.doubleCount 1 } }, actions: { increment() { this.count }, async fetchData() { const data await fetch(/api/data) this.count await data.json() } } })Setup Store类似 Composition API// stores/counter.js import { defineStore } from pinia import { ref, computed } from vue export const useCounterStore defineStore(counter, () { const count ref(0) const name ref(计数器) const doubleCount computed(() count.value * 2) const doubleCountPlusOne computed(() doubleCount.value 1) function increment() { count.value } async function fetchData() { const data await fetch(/api/data) count.value await data.json() } return { count, name, doubleCount, doubleCountPlusOne, increment, fetchData } })选择建议如果你来自 Vuex 背景Option Store 会更熟悉如果你习惯 Composition APISetup Store 会更自然。两者在功能上是等价的。3.3 在组件中使用 Storescript setup import { useCounterStore } from /stores/counter import { storeToRefs } from pinia const counterStore useCounterStore() // 直接访问 state console.log(counterStore.count) // 调用 action counterStore.increment() // 使用 getter console.log(counterStore.doubleCount) // 如果需要解构并保持响应性使用 storeToRefs const { count, doubleCount } storeToRefs(counterStore) // actions 可以直接解构因为它们绑定到 store const { increment } counterStore /script template div p计数: {{ counterStore.count }}/p p双倍计数: {{ counterStore.doubleCount }}/p button clickcounterStore.increment增加/button /div /template3.4 持久化状态配置在实际项目中我们经常需要持久化某些状态如用户登录信息。推荐使用pinia-plugin-persistedstatenpm install pinia-plugin-persistedstate// main.js import { createApp } from vue import { createPinia } from pinia import piniaPluginPersistedstate from pinia-plugin-persistedstate const app createApp(App) const pinia createPinia() pinia.use(piniaPluginPersistedstate) app.use(pinia)在 store 中配置持久化export const useUserStore defineStore(user, { state: () ({ token: , userInfo: null }), persist: { enabled: true, strategies: [ { key: user, storage: localStorage, paths: [token] // 只持久化 token } ] } })4. Vue Router 4 路由管理4.1 路由定义与导航守卫Vue Router 4 最大的变化是创建路由实例的方式// router/index.js import { createRouter, createWebHistory } from vue-router const routes [ { path: /, name: Home, component: () import(/views/Home.vue), meta: { requiresAuth: true } }, { path: /login, name: Login, component: () import(/views/Login.vue) }, { path: /user/:id, name: User, component: () import(/views/User.vue), props: true // 将路由参数作为 props 传递 } ] const router createRouter({ history: createWebHistory(), routes }) // 全局前置守卫 router.beforeEach((to, from) { const userStore useUserStore() if (to.meta.requiresAuth !userStore.token) { return { name: Login } } }) export default router4.2 组合式 API 中使用路由在 Composition API 中我们使用useRouter和useRoutescript setup import { useRouter, useRoute } from vue-router const router useRouter() const route useRoute() // 编程式导航 const goToUser (userId) { router.push({ name: User, params: { id: userId } }) } // 获取当前路由参数 const userId computed(() route.params.id) // 监听路由变化 watch( () route.params.id, (newId) { fetchUser(newId) } ) /script4.3 解决路由参数变化页面不刷新的问题这是 Vue Router 常见的痛点当从/user/1导航到/user/2时组件不会重新创建。解决方案script setup import { watch } from vue import { useRoute } from vue-router const route useRoute() const userData ref(null) // 方法1监听 params 变化 watch( () route.params.id, async (newId) { userData.value await fetchUser(newId) }, { immediate: true } // 立即执行一次 ) // 方法2使用 onBeforeRouteUpdate 导航守卫 import { onBeforeRouteUpdate } from vue-router onBeforeRouteUpdate(async (to, from) { if (to.params.id ! from.params.id) { userData.value await fetchUser(to.params.id) } }) /script template !-- 方法3为 router-view 添加 key -- router-view :keyroute.fullPath / /template5. 项目实战构建用户管理系统让我们通过一个完整的用户管理系统将所学知识整合起来。5.1 项目结构设计src/ ├── components/ # 可复用组件 │ ├── UserForm.vue │ └── UserList.vue ├── composables/ # 组合式函数 │ ├── useApi.js │ └── usePagination.js ├── stores/ # Pinia stores │ ├── user.js │ └── app.js ├── router/ # 路由配置 │ └── index.js ├── views/ # 页面组件 │ ├── Home.vue │ ├── Login.vue │ └── UserManagement.vue └── App.vue5.2 用户状态管理 Store// stores/user.js import { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , currentUser: null, users: [] }), getters: { isLoggedIn: (state) !!state.token, getUserById: (state) (id) { return state.users.find(user user.id id) } }, actions: { setToken(token) { this.token token localStorage.setItem(token, token) }, clearToken() { this.token localStorage.removeItem(token) }, async login(credentials) { const response await fetch(/api/login, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(credentials) }) if (response.ok) { const { token, user } await response.json() this.setToken(token) this.currentUser user return true } return false }, async logout() { this.clearToken() this.currentUser null this.users [] }, async fetchUsers() { const response await fetch(/api/users, { headers: { Authorization: Bearer ${this.token} } }) if (response.ok) { this.users await response.json() } } }, persist: { enabled: true, strategies: [ { key: user, storage: localStorage, paths: [token] } ] } })5.3 路由配置与权限控制// router/index.js import { createRouter, createWebHistory } from vue-router const routes [ { path: /, name: Home, component: () import(/views/Home.vue), meta: { requiresAuth: true } }, { path: /login, name: Login, component: () import(/views/Login.vue), meta: { guestOnly: true } }, { path: /users, name: UserManagement, component: () import(/views/UserManagement.vue), meta: { requiresAuth: true, requiresAdmin: true } }, { path: /users/:id, name: UserDetail, component: () import(/views/UserDetail.vue), meta: { requiresAuth: true }, props: true } ] const router createRouter({ history: createWebHistory(), routes }) router.beforeEach((to, from) { const userStore useUserStore() // 检查是否需要认证 if (to.meta.requiresAuth !userStore.isLoggedIn) { return { name: Login, query: { redirect: to.fullPath } } } // 检查是否只允许未登录用户访问 if (to.meta.guestOnly userStore.isLoggedIn) { return { name: Home } } // 检查管理员权限 if (to.meta.requiresAdmin (!userStore.currentUser || !userStore.currentUser.isAdmin)) { return { name: Home } } }) export default router5.4 用户管理页面实现!-- views/UserManagement.vue -- script setup import { onMounted, ref, computed } from vue import { useUserStore } from /stores/user import { usePagination } from /composables/usePagination const userStore useUserStore() const searchQuery ref() // 使用组合式函数处理分页 const { currentPage, pageSize, totalPages, paginatedData } usePagination( computed(() userStore.users), 10 ) // 搜索过滤 const filteredUsers computed(() { if (!searchQuery.value) return userStore.users return userStore.users.filter(user user.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || user.email.toLowerCase().includes(searchQuery.value.toLowerCase()) ) }) onMounted(async () { if (userStore.users.length 0) { await userStore.fetchUsers() } }) const deleteUser async (userId) { if (confirm(确定要删除这个用户吗)) { await fetch(/api/users/${userId}, { method: DELETE, headers: { Authorization: Bearer ${userStore.token} } }) await userStore.fetchUsers() // 重新加载用户列表 } } /script template div classuser-management h1用户管理/h1 div classtoolbar input v-modelsearchQuery placeholder搜索用户... classsearch-input button click$router.push(/users/new) classbtn-primary 添加用户 /button /div table classuser-table thead tr thID/th th姓名/th th邮箱/th th操作/th /tr /thead tbody tr v-foruser in paginatedData :keyuser.id td{{ user.id }}/td td{{ user.name }}/td td{{ user.email }}/td td button click$router.push(/users/${user.id})编辑/button button clickdeleteUser(user.id) classbtn-danger删除/button /td /tr /tbody /table !-- 分页控件 -- div classpagination button :disabledcurrentPage 1 clickcurrentPage-- 上一页 /button span第 {{ currentPage }} 页共 {{ totalPages }} 页/span button :disabledcurrentPage totalPages clickcurrentPage 下一页 /button /div /div /template6. 性能优化与最佳实践6.1 组件懒加载对于大型应用使用路由懒加载可以显著提升初始加载速度// router/index.js const routes [ { path: /admin, name: Admin, component: () import(/* webpackChunkName: admin */ /views/Admin.vue) } ]6.2 状态管理优化避免在 store 中存储过大或不需要响应式的数据// 不推荐存储大量不需要响应式的数据 state: () ({ largeData: [] // 数千条数据会影响性能 }) // 推荐使用 shallowRef 或标记为非响应式 import { shallowRef } from vue export const useDataStore defineStore(data, () { const largeData shallowRef([]) // 浅层响应式 return { largeData } })6.3 计算属性缓存与记忆化合理使用计算属性避免重复计算const expensiveValue computed(() { // 复杂的计算逻辑 return heavyCalculation(someData.value) }) // 对于依赖多个参数的计算使用记忆化 import { computed } from vue function useMemoizedComputed(getter, deps) { return computed(() { // 读取依赖项以确保响应性 deps.forEach(dep dep.value) return getter() }) }7. 常见问题与解决方案7.1 响应式丢失问题// ❌ 错误直接解构会丢失响应性 const { count, name } useCounterStore() // ✅ 正确使用 storeToRefs import { storeToRefs } from pinia const { count, name } storeToRefs(useCounterStore()) // ✅ 正确在模板中直接访问 const store useCounterStore() // 在模板中{{ store.count }}7.2 循环依赖问题当 store 之间需要相互引用时// stores/user.js export const useUserStore defineStore(user, { actions: { async someAction() { // 在函数内引用其他 store避免循环导入 const { useProductStore } await import(/stores/product) const productStore useProductStore() // ... 使用 productStore } } })7.3 TypeScript 类型定义为 store 提供完整的类型支持// types/user.ts export interface User { id: number name: string email: string isAdmin: boolean } // stores/user.ts import { defineStore } from pinia import type { User } from /types/user interface UserState { token: string currentUser: User | null users: User[] } export const useUserStore defineStore(user, { state: (): UserState ({ token: , currentUser: null, users: [] }), getters: { isLoggedIn: (state) !!state.token, getUserById: (state) (id: number) { return state.users.find(user user.id id) } } })8. 从 Vue2 迁移的实用技巧8.1 渐进式迁移策略混合使用在 Vue3 项目中可以使用vue/composition-api插件逐步迁移按组件迁移逐个组件重写而不是一次性重写整个项目工具辅助使用 vue-composition-api-migration-helper 工具8.2 API 映射指南Vue2 Options APIVue3 Composition APIdata()ref()或reactive()methods普通函数computedcomputed()watchwatch()或watchEffect()mounted等生命周期onMounted()等8.3 常见迁移陷阱this 上下文变化Composition API 中不再使用 this生命周期钩子名称变化添加on前缀如mounted→onMounted事件总线模式变化推荐使用mitt或provide/inject替代$on/$emit通过系统学习 Composition API、Pinia 和 Vue Router 的深度集成你不仅能够构建更复杂的 Vue3 应用还能在面试和团队协作中展现出对现代前端开发的深刻理解。真正的进阶不在于记住所有 API而在于理解其设计哲学并能在实际项目中做出合理的技术决策。
