企业官网建设流程全解析

如果你正在从 Vue2 转向 Vue3，或者已经在 Vue3 项目中摸爬滚打了一段时间，却总觉得对 Composition API、Pinia、Router 这些核心概念的理解停留在表面——那么这篇文章正是为你准备的。

很多开发者以为 Vue3 只是"语法变了"，但实际上，它带来的是一套全新的前端开发思维。Composition API 不是简单的代码组织方式改变，而是为了解决 Vue2 中随着组件复杂度增加带来的代码碎片化问题。Pinia 作为 Vuex 的继任者，真正简化了状态管理的心智负担。而 Vue Router 在 Vue3 中的变化，更是直接影响着页面性能和数据流的设计。

本文将带你深入 Vue3 的核心三件套，通过实际项目场景展示如何正确使用这些工具。读完本文，你将不仅知道"怎么用"，更重要的是理解"为什么这样设计"，以及在实际项目中如何避免常见的性能陷阱和架构误区。

1. Composition API：不只是语法糖，而是代码组织的革命

1.1 为什么需要 Composition API？

在 Vue2 的 Options API 中，一个功能相关的代码会被分散到data、methods、computed、mounted等不同选项中。当组件功能复杂时，阅读和维护变得困难。比如一个用户管理组件，用户数据的定义、用户相关的操作、用户数据的计算属性都被分散在不同位置。

Composition API 的核心思想是将相关功能的代码组织在一起，而不是按照选项类型分散。这不仅仅是语法上的改变，更是对组件设计思维的转变。

1.2 核心响应式 API 详解

import { ref, reactive, computed, watch, watchEffect } from 'vue' // 基础响应式数据定义 const count = ref(0) // 适用于基本类型 const userInfo = reactive({ // 适用于对象 name: '张三', age: 25, department: '技术部' }) // 计算属性 const isAdult = computed(() => userInfo.age >= 18) // 监听器 watch(count, (newVal, oldVal) => { console.log(`计数从 ${oldVal} 变为 ${newVal}`) }) // 自动依赖收集的监听器 watchEffect(() => { console.log(`当前用户年龄: ${userInfo.age}, 是否成年: ${isAdult.value}`) })

关键理解点：

• ref需要.value访问，但在模板中自动解包
• reactive直接访问属性，但不能解构否则会失去响应性
• computed具有缓存特性，只有依赖变化时才重新计算
• watch需要明确指定监听源，watchEffect自动收集依赖

1.3 组合式函数的实际应用

组合式函数是 Composition API 最强大的特性之一，让我们能够提取和重用状态逻辑：

// composables/useUserManagement.js import { ref, computed } from 'vue' import { userApi } from '@/api/user' export function useUserManagement() { const users = ref([]) const loading = ref(false) const error = ref(null) const userCount = computed(() => users.value.length) const activeUsers = computed(() => users.value.filter(user => user.status === 'active') ) async function fetchUsers() { loading.value = true error.value = null try { const response = await userApi.getUsers() users.value = response.data } catch (err) { error.value = err.message } finally { loading.value = false } } function addUser(user) { users.value.push(user) } return { users, loading, error, userCount, activeUsers, fetchUsers, addUser } }

在组件中使用：

<template> <div> <div v-if="loading">加载中...</div> <div v-else-if="error">错误: {{ error }}</div> <div v-else> <p>总用户数: {{ userCount }}</p> <p>活跃用户: {{ activeUsers.length }}</p> <button @click="fetchUsers">刷新</button> </div> </div> </template> <script setup> import { useUserManagement } from '@/composables/useUserManagement' const { users, loading, error, userCount, activeUsers, fetchUsers } = useUserManagement() // 组件挂载时自动获取用户 fetchUsers() </script>

2. Pinia 状态管理：简单却强大的新选择

2.1 Pinia 与 Vuex 的核心差异

Pinia 被设计为 Vuex 的替代品，但 API 更加简洁直观。主要差异包括：

• 不再有mutations，只有state、getters、actions
• 完整的 TypeScript 支持
• 模块化设计更加自然
• 更少的模板代码

2.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, // 使用其他 getter doubleCountPlusOne() { return this.doubleCount + 1 } }, actions: { increment() { this.count++ }, async incrementAsync() { await new Promise(resolve => setTimeout(resolve, 1000)) this.increment() } } })

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 incrementAsync() { await new Promise(resolve => setTimeout(resolve, 1000)) increment() } return { count, name, doubleCount, doubleCountPlusOne, increment, incrementAsync } })

2.3 在组件中使用 Store

<template> <div> <h3>{{ store.name }}</h3> <p>计数: {{ store.count }}</p> <p>双倍计数: {{ store.doubleCount }}</p> <button @click="store.increment">+1</button> <button @click="store.incrementAsync">异步+1</button> </div> </template> <script setup> import { useCounterStore } from '@/stores/counter' const store = useCounterStore() </script>

2.4 正确的响应式解构

直接解构 Store 会失去响应性，需要使用storeToRefs：

<script setup> import { useCounterStore } from '@/stores/counter' import { storeToRefs } from 'pinia' const store = useCounterStore() const { increment, incrementAsync } = store // actions 可以直接解构 const { count, name, doubleCount } = storeToRefs(store) // state 和 getters 需要 storeToRefs // 现在 count, name, doubleCount 都是响应式的 </script>

3. Vue Router 4：现代化路由解决方案

3.1 路由定义与配置

// router/index.js import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue'), meta: { requiresAuth: true } }, { path: '/user/:id', name: 'UserProfile', component: () => import('@/views/UserProfile.vue'), props: true, // 将路由参数作为 props 传递 children: [ { path: 'settings', name: 'UserSettings', component: () => import('@/views/UserSettings.vue') } ] }, { path: '/login', name: 'Login', component: () => import('@/views/Login.vue'), meta: { guestOnly: true } } ] const router = createRouter({ history: createWebHistory(), routes, scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { top: 0 } } } }) export default router

3.2 路由守卫与权限控制

// 全局前置守卫 router.beforeEach((to, from) => { const isAuthenticated = checkAuth() // 你的认证检查逻辑 if (to.meta.requiresAuth && !isAuthenticated) { return { name: 'Login', query: { redirect: to.fullPath } } } if (to.meta.guestOnly && isAuthenticated) { return { name: 'Home' } } }) // 路由独享的守卫 const routes = [ { path: '/admin', component: AdminPanel, beforeEnter: (to, from) => { if (!isAdmin()) { return { name: 'AccessDenied' } } } } ]

3.3 组合式 API 中的路由使用

<template> <div> <h2>用户详情: {{ user.name }}</h2> <nav> <router-link :to="{ name: 'UserProfile', params: { id: userId } }"> 基本信息 </router-link> <router-link :to="{ name: 'UserSettings', params: { id: userId } }"> 设置 </router-link> </nav> <router-view /> </div> </template> <script setup> import { useRoute, useRouter } from 'vue-router' import { computed, watch } from 'vue' import { useUserStore } from '@/stores/user' const route = useRoute() const router = useRouter() const userStore = useUserStore() const userId = computed(() => route.params.id) // 监听路由参数变化 watch(userId, async (newId) => { await userStore.fetchUser(newId) }) // 编程式导航 function goToSettings() { router.push({ name: 'UserSettings', params: { id: userId.value }, query: { section: 'privacy' } }) } // 替换当前路由（不添加历史记录） function replaceToHome() { router.replace({ name: 'Home' }) } </script>

4. 三者的协同工作模式

4.1 在 Store 中访问路由信息

根据 Pinia 文档，Setup Store 可以访问全局提供的属性如路由：

// stores/search.js import { defineStore } from 'pinia' import { useRoute } from 'vue-router' export const useSearchStore = defineStore('search', () => { const route = useRoute() const searchQuery = ref('') // 基于当前路由初始化搜索条件 if (route.query.q) { searchQuery.value = route.query.q } watch(searchQuery, (newQuery) => { // 更新 URL 查询参数 router.replace({ query: { ...route.query, q: newQuery } }) }) return { searchQuery } })

4.2 路由变化时更新 Store 状态

// 在组件或 Store 中 watch( () => route.params.id, async (newId) => { if (newId) { await userStore.fetchUser(newId) } }, { immediate: true } // 立即执行一次 )

5. 实战项目：用户管理系统

让我们通过一个完整的用户管理系统来展示三者的协同工作。

5.1 项目结构

src/ ├── components/ │ ├── UserList.vue │ └── UserForm.vue ├── composables/ │ ├── useApi.js │ └── usePagination.js ├── stores/ │ ├── user.js │ └── auth.js ├── views/ │ ├── UserManagement.vue │ └── UserDetail.vue └── router/ └── index.js

5.2 用户 Store 实现

// stores/user.js import { defineStore } from 'pinia' import { ref, computed } from 'vue' import { userApi } from '@/api' export const useUserStore = defineStore('user', () => { const users = ref([]) const currentUser = ref(null) const loading = ref(false) const error = ref(null) // Getters const activeUsers = computed(() => users.value.filter(user => user.status === 'active') ) const userCount = computed(() => users.value.length) // Actions async function fetchUsers(params = {}) { loading.value = true error.value = null try { const response = await userApi.getUsers(params) users.value = response.data } catch (err) { error.value = err.message } finally { loading.value = false } } async function fetchUserById(id) { loading.value = true try { const response = await userApi.getUser(id) currentUser.value = response.data } catch (err) { error.value = err.message throw err } finally { loading.value = false } } async function createUser(userData) { const response = await userApi.createUser(userData) users.value.push(response.data) return response.data } async function updateUser(id, userData) { const response = await userApi.updateUser(id, userData) const index = users.value.findIndex(user => user.id === id) if (index !== -1) { users.value[index] = response.data } if (currentUser.value && currentUser.value.id === id) { currentUser.value = response.data } return response.data } function clearError() { error.value = null } return { // State users, currentUser, loading, error, // Getters activeUsers, userCount, // Actions fetchUsers, fetchUserById, createUser, updateUser, clearError } })

5.3 用户管理页面

<template> <div class="user-management"> <div class="header"> <h1>用户管理</h1> <button @click="showCreateForm = true">添加用户</button> </div> <div v-if="loading">加载中...</div> <div v-else-if="error" class="error">{{ error }}</div> <UserList :users="filteredUsers" @edit="handleEdit" @delete="handleDelete" /> <UserForm v-if="showCreateForm || editingUser" :user="editingUser" @submit="handleSubmit" @cancel="handleCancel" /> <div class="pagination"> <button v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }" @click="goToPage(page)" > {{ page }} </button> </div> </div> </template> <script setup> import { ref, computed, onMounted } from 'vue' import { useUserStore } from '@/stores/user' import { usePagination } from '@/composables/usePagination' import UserList from '@/components/UserList.vue' import UserForm from '@/components/UserForm.vue' const userStore = useUserStore() const showCreateForm = ref(false) const editingUser = ref(null) const { currentPage, pageSize, totalPages, goToPage } = usePagination() const filteredUsers = computed(() => { const start = (currentPage.value - 1) * pageSize.value const end = start + pageSize.value return userStore.users.slice(start, end) }) onMounted(async () => { await userStore.fetchUsers() }) async function handleEdit(user) { editingUser.value = { ...user } } async function handleDelete(userId) { if (confirm('确定删除这个用户吗？')) { try { await userStore.deleteUser(userId) } catch (error) { alert('删除失败: ' + error.message) } } } async function handleSubmit(userData) { try { if (userData.id) { await userStore.updateUser(userData.id, userData) } else { await userStore.createUser(userData) } showCreateForm.value = false editingUser.value = null } catch (error) { alert('操作失败: ' + error.message) } } function handleCancel() { showCreateForm.value = false editingUser.value = null userStore.clearError() } </script>

6. 性能优化与最佳实践

6.1 组件性能优化

<template> <!-- 使用 v-memo 优化大型列表 --> <div v-for="user in users" :key="user.id" v-memo="[user.id, user.name, user.status]" class="user-item" > {{ user.name }} - {{ user.status }} </div> </template> <script setup> import { shallowRef } from 'vue' // 对于大型对象，使用 shallowRef 避免深度响应式 const largeData = shallowRef({ /* 大量数据 */ }) // 计算属性缓存优化 const expensiveValue = computed(() => { // 复杂计算 }, { // 自定义缓存策略 cache: true }) </script>

6.2 Store 使用最佳实践

// 避免在 Store 中直接修改 DOM // 错误示例 actions: { updateUser() { this.fetchUser() document.getElementById('user-info').classList.add('updated') // ❌ } } // 正确做法：通过状态驱动 UI actions: { async updateUser() { this.loading = true await this.fetchUser() this.loading = false this.showUpdateAnimation = true // ✅ } }

6.3 路由懒加载与代码分割

const routes = [ { path: '/admin', component: () => import(/* webpackChunkName: "admin" */ '@/views/Admin.vue') } ]

7. 常见问题与解决方案

7.1 响应式丢失问题

// 问题：直接解构失去响应性 const { count, name } = useCounterStore() // ❌ count 和 name 不是响应式的 // 解决方案1：使用 storeToRefs import { storeToRefs } from 'pinia' const store = useCounterStore() const { count, name } = storeToRefs(store) // ✅ // 解决方案2：使用计算属性 const count = computed(() => store.count) const name = computed(() => store.name)

7.2 路由参数监听问题

// 问题：路由参数变化时组件不更新 const userId = route.params.id // ❌ 不会自动更新 // 解决方案：使用计算属性或 watch const userId = computed(() => route.params.id) // ✅ watch( () => route.params.id, (newId) => { // 处理参数变化 } )

7.3 Store 间相互调用

// 避免循环依赖 // stores/user.js import { useAuthStore } from './auth' export const useUserStore = defineStore('user', () => { const authStore = useAuthStore() // 在 action 中调用其他 store async function fetchCurrentUser() { if (!authStore.isAuthenticated) { throw new Error('未认证') } // ... 获取用户数据 } })

8. TypeScript 集成

8.1 类型安全的 Store

// stores/user.ts import { defineStore } from 'pinia' interface User { id: number name: string email: string status: 'active' | 'inactive' } interface UserState { users: User[] currentUser: User | null loading: boolean error: string | null } export const useUserStore = defineStore('user', { state: (): UserState => ({ users: [], currentUser: null, loading: false, error: null }), getters: { activeUsers: (state): User[] => state.users.filter(user => user.status === 'active'), getUserById: (state) => (id: number): User | undefined => state.users.find(user => user.id === id) }, actions: { async fetchUserById(id: number): Promise<void> { this.loading = true try { const response = await userApi.getUser(id) this.currentUser = response.data } catch (error: any) { this.error = error.message } finally { this.loading = false } } } })

9. 测试策略

9.1 组件测试示例

// tests/UserComponent.spec.js import { mount } from '@vue/test-utils' import { createPinia, setActivePinia } from 'pinia' import UserComponent from '@/components/UserComponent.vue' import { useUserStore } from '@/stores/user' describe('UserComponent', () => { let pinia let userStore beforeEach(() => { pinia = createPinia() setActivePinia(pinia) userStore = useUserStore() }) it('应该显示用户列表', async () => { // 模拟 Store 数据 userStore.users = [ { id: 1, name: '用户1', status: 'active' }, { id: 2, name: '用户2', status: 'inactive' } ] const wrapper = mount(UserComponent, { global: { plugins: [pinia] } }) expect(wrapper.findAll('.user-item')).toHaveLength(2) }) })

通过本文的深入学习，你应该已经掌握了 Vue3 核心三件套的高级用法。记住，真正的掌握不在于记住所有 API，而在于理解其设计哲学和应用场景。在实际项目中，根据团队习惯和项目规模选择合适的模式，保持代码的一致性和可维护性才是最重要的。

建议将本文作为参考手册收藏，在遇到具体问题时回来查阅相应的解决方案。Vue3 的生态系统还在不断演进，保持学习的心态，关注官方文档的更新，才能在前端开发的道路上走得更远。