Vue3 进阶实战全解（进阶篇）：组件通信 / 路由 / Pinia / 企业开发

图1：Vue3 进阶实战 企业级开发知识体系

一、Vue3 进阶实战核心：组件通信（小白必懂）

在Vue3企业项目开发中，组件通信是最核心的技能之一，不同组件间传递数据是日常开发的高频需求。下面给大家分享Vue3中4种最常用的通信方式，代码加详细注释，新手直接抄作业。

1. 父传子：props（最基础通信）

<!-- 父组件App.vue -->
<template>
  <!-- :title 是v-bind简写，把父组件数据传递给子组件 -->
  <ChildComponent :title="parentMsg" />
</template>

<script>
export default {
  data() {
    return {
      parentMsg: "父组件传递的数据"
    }
  }
}
</script>

<!-- 子组件ChildComponent.vue -->
<template>
  <div>{{ title }}</div>
</template>

<script>
export default {
  // props接收父组件数据，type限制类型，required必填（避坑：避免传空报错）
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

Vue3 进阶实战避坑：props是单向数据流，子组件绝对不能直接修改props！如果要修改，必须通过子传父通知父组件修改，否则会触发Vue警告。

2. 子传父：自定义事件$emit

<!-- 子组件ChildComponent.vue -->
<template>
  <button @click="sendToParent">子传父数据</button>
</template>

<script>
export default {
  methods: {
    sendToParent() {
      // $emit触发自定义事件，传递数据给父组件
      this.$emit('child-event', '子组件传递的数据')
    }
  }
}
</script>

<!-- 父组件App.vue -->
<template>
  <ChildComponent @child-event="getParentData" />
</template>

<script>
export default {
  methods: {
    getParentData(val) {
      console.log('父组件收到数据：', val)
    }
  }
}
</script>

3. 兄弟通信：mitt（轻量事件总线）

兄弟组件通信推荐用mitt（小型事件总线），比bus更轻量，适合Vue3项目。

// 1. 安装mitt
// npm install mitt

// 2. 创建事件总线 utils/bus.js
import mitt from 'mitt'
const bus = mitt()
export default bus

// 3. 兄弟组件A（发送数据）
<script>
import bus from '@/utils/bus'
export default {
  methods: {
    sendToBrother() {
      // 发送事件和数据
      bus.emit('brother-event', '兄弟组件传递的数据')
    }
  }
}
</script>

// 4. 兄弟组件B（接收数据）
<script>
import bus from '@/utils/bus'
export default {
  mounted() {
    // 监听事件，接收数据
    bus.on('brother-event', (val) => {
      console.log('兄弟组件收到数据：', val)
    })
  },
  unmounted() {
    // 组件销毁时解绑事件，避免内存泄漏（必做）
    bus.off('brother-event')
  }
}
</script>

4. 跨层级通信：provide/inject（祖孙组件通信）

如果是祖孙多层级组件，用props/emit太繁琐，推荐用provide/inject，直接跨层级传递数据，无需逐层传递。

<!-- 顶层父组件App.vue -->
<script>
export default {
  // 提供数据，所有后代组件都能拿到
  provide() {
    return {
      appName: 'Vue3企业级项目'
    }
  }
}
</script>

<!-- 后代组件（任意层级） -->
<script>
export default {
  // 注入顶层提供的数据
  inject: ['appName'],
  mounted() {
    console.log('后代组件拿到数据：', this.appName)
  }
}
</script>

二、Vue3 进阶实战核心：生命周期钩子（组件全流程）

Vue3中，生命周期钩子控制着组件从创建、挂载、更新到销毁的全流程，每个钩子对应不同的使用场景，新手一定要搞懂。

<script>
export default {
  // 1. created：组件创建完成，data已初始化（发异步请求最佳时机）
  created() {
    console.log('组件创建完成，data就绪')
  },
  // 2. mounted：DOM渲染完成（操作DOM、初始化插件最佳时机）
  mounted() {
    console.log('DOM渲染完成，可操作DOM')
  },
  // 3. updated：数据更新，页面重新渲染（数据更新后DOM操作）
  updated() {
    console.log('数据更新，页面重新渲染')
  },
  // 4. unmounted：组件销毁前（清除定时器、解绑事件，避免内存泄漏）
  unmounted() {
    console.log('组件销毁，清理副作用')
  }
}
</script>

三、Vue3 进阶实战核心：Vue Router路由管理（SPA跳转）

Vue Router是Vue3官方路由管理器，用于实现单页面应用（SPA）的页面跳转，是企业项目的必备技能。

// 1. 安装Vue Router（Vue3对应v4，必装）
// npm install vue-router@4

// 2. 路由配置 router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHistory(), // 历史模式，去掉#号，SEO更友好
  routes
})

// 3. 全局前置路由守卫（企业项目权限控制核心）
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  // 未登录且访问非首页，跳转到登录页
  if (!token && to.path !== '/') {
    next('/')
  } else {
    next()
  }
})

export default router

// 4. 页面使用路由
<template>
  <router-link to="/">首页</router-link>
  <router-link to="/about">关于页</router-link>
  <router-view /> <!-- 路由出口，路由渲染位置 -->
</template>

四、Vue3 进阶实战核心：Pinia状态管理（替代Vuex）

Pinia是Vue3官方推荐的状态管理库，语法比Vuex简洁10倍，支持TypeScript，是企业项目首选。

// 1. 安装Pinia（必装）
// npm install pinia

// 2. 定义仓库 store/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }), // 全局状态
  actions: {
    increment() { this.count++ } // 修改状态的方法
  },
  getters: { doubleCount: (state) => state.count * 2 } // 计算属性
})

// 3. 组件使用Pinia
<script setup>
import { useCounterStore } from '@/store/counter'
const counterStore = useCounterStore()
counterStore.increment() // 调用方法修改状态
</script>

Pinia状态持久化实战（解决刷新丢失）

Pinia默认状态是内存存储，刷新页面会丢失，用pinia-plugin-persistedstate实现持久化，企业项目必用。

// 1. 安装持久化插件
// npm install pinia-plugin-persistedstate

// 2. main.js配置插件
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 启用持久化

createApp(App).use(pinia).mount('#app')

// 3. 仓库配置持久化（store/counter.js）
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++ } },
  persist: true // 开启持久化，自动存储到localStorage
})

图2：Vue3 进阶实战 路由+状态管理+网络请求实战

五、Vue3 进阶实战核心：Axios网络请求（前后端交互）

Axios是Vue3最常用的HTTP请求库，支持Promise、拦截器，是前后端交互的标配。

// 1. 安装Axios（必装）
// npm install axios

// 2. 封装Axios utils/request.js
import axios from 'axios'
const request = axios.create({
  baseURL: 'https://api.example.com', // 基础URL，统一请求前缀
  timeout: 5000
})

// 请求拦截器：统一加token（权限控制）
request.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

// 响应拦截器：统一处理错误
request.interceptors.response.use(
  res => res.data,
  err => {
    console.error('请求错误：', err)
    return Promise.reject(err)
  }
)

export default request

// 3. 组件使用Axios
<script setup>
import request from '@/utils/request'
onMounted(async () => {
  // 发送GET请求
  const data = await request.get('/user/list')
  console.log('请求数据：', data)
})
</script>

六、Vue3 进阶实战核心：组合式API setup语法糖（企业主流）

组合式API是现在企业开发的主流写法，解决了选项式API代码分散、复用性差的问题。

<template>
  <div>{{ count }}</div>
  <button @click="increment">累加</button>
</template>

<script setup> <!-- setup语法糖，企业主流写法 -->
import { ref, onMounted } from 'vue'
const count = ref(0) // 响应式数据
const increment = () => count.value++ // 修改数据
onMounted(() => console.log('组件挂载完成'))
</script>

七、Vue3 进阶实战避坑指南（企业踩坑实录）

八、Vue3 进阶实战总结（核心知识点梳理）