Chenqi's Blog

Appearance

Vue 3 技术专栏 ​

深入探索 Vue 3 生态系统，从 Composition API 到性能优化，从组件设计到架构实践的全方位指南。

📚 文章目录 ​

Vue 3 核心特性 ​

🎯 学习路径 ​

🌱 Vue 3 入门 ​

  1. 基础概念 → 模板语法、指令、事件处理
  2. 组件系统 → 单文件组件、Props、Emit
  3. 响应式数据 → ref、reactive、computed
  4. 生命周期 → 组件生命周期钩子

🚀 进阶开发 ​

  1. Composition API → 逻辑复用和代码组织
  2. 状态管理 → Pinia、Vuex 4
  3. 路由系统 → Vue Router 4
  4. 工具链 → Vite、Vue CLI

🏗️ 架构设计 ​

  1. 大型应用 → 模块化和微前端
  2. SSR/SSG → Nuxt 3 和服务端渲染
  3. 移动端 → Vue 3 + Vant/Quasar
  4. 桌面应用 → Electron + Vue 3

🛠️ Vue 3 生态系统 ​

核心库 ​

  • Vue 3 - 渐进式 JavaScript 框架
  • Vue Router 4 - 官方路由管理器
  • Pinia - 新一代状态管理库
  • VueUse - Vue 组合式工具集

构建工具 ​

  • Vite - 下一代前端构建工具
  • Vue CLI - Vue.js 开发的标准工具
  • Nuxt 3 - Vue.js 全栈框架
  • Quasar - 跨平台 Vue 框架

UI 组件库 ​

  • Element Plus - 桌面端组件库
  • Ant Design Vue - 企业级 UI 设计语言
  • Vuetify - Material Design 组件库
  • Vant - 移动端组件库

🎨 Composition API 最佳实践 ​

基础用法 ​

vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const count = ref(0)
const title = ref('Vue 3 Demo')

// 计算属性
const doubleCount = computed(() => count.value * 2)

// 方法
const increment = () => {
  count.value++
}

// 生命周期
onMounted(() => {
  console.log('Component mounted')
})
</script>

自定义组合式函数 ​

javascript
// composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  const isEven = computed(() => count.value % 2 === 0)
  
  return {
    count,
    increment,
    decrement,
    reset,
    isEven
  }
}

状态管理 (Pinia) ​

javascript
// stores/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null,
    isLoggedIn: false
  }),
  
  getters: {
    userName: (state) => state.user?.name || 'Guest',
    userRole: (state) => state.user?.role || 'user'
  },
  
  actions: {
    async login(credentials) {
      try {
        const response = await api.login(credentials)
        this.user = response.data
        this.isLoggedIn = true
      } catch (error) {
        throw new Error('Login failed')
      }
    },
    
    logout() {
      this.user = null
      this.isLoggedIn = false
    }
  }
})

🚀 性能优化策略 ​

组件优化 ​

  • v-memo - 缓存模板渲染结果
  • v-once - 一次性渲染
  • 异步组件 - 代码分割和懒加载
  • KeepAlive - 组件缓存

响应式优化 ​

  • shallowRef - 浅层响应式
  • markRaw - 标记非响应式对象
  • toRaw - 获取原始对象
  • readonly - 只读响应式对象

构建优化 ​

javascript
// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          'ui-vendor': ['element-plus']
        }
      }
    }
  },
  optimizeDeps: {
    include: ['vue', 'vue-router', 'pinia']
  }
}

🎯 实践项目 ​

初级项目 ​

  • Todo 应用 - 基础 CRUD 操作
  • 天气应用 - API 调用和数据展示
  • 博客系统 - 路由和组件通信

中级项目 ​

  • 电商平台 - 复杂状态管理
  • 后台管理系统 - 权限控制和数据可视化
  • 实时聊天 - WebSocket 和实时通信

高级项目 ​

  • 微前端架构 - 模块联邦和子应用
  • SSR 应用 - Nuxt 3 服务端渲染
  • 跨平台应用 - Electron 桌面应用

🔧 开发工具配置 ​

VS Code 插件 ​

  • Vetur - Vue 语法高亮和智能提示
  • Vue Language Features (Volar) - Vue 3 官方插件
  • TypeScript Vue Plugin (Volar) - TypeScript 支持
  • Vue VSCode Snippets - Vue 代码片段

项目配置 ​

json
// .vscode/settings.json
{
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "typescript.suggest.autoImports": true,
  "vue.codeActions.enabled": true,
  "vue.complete.casing.tags": "kebab",
  "vue.complete.casing.props": "camel"
}

📖 相关资源 ​

💡 学习建议 ​

  1. 渐进式学习 - 从 Options API 过渡到 Composition API
  2. 实践为主 - 通过项目实践加深理解
  3. 生态了解 - 熟悉 Vue 3 生态系统
  4. 性能意识 - 关注应用性能和用户体验
  5. 社区参与 - 关注 Vue 官方和社区动态

Vue 3 带来了更好的性能、更小的体积和更强的 TypeScript 支持