vue3 基础知识

一、基础核心

1. 组件化开发

   • 单文件组件（.vue 文件结构：<template>, <script>, <style>）
   • 组件通信：props / emits、provide/inject、全局状态（Pinia/Vuex）
   • 动态组件（<component :is>）、异步组件（defineAsyncComponent）

2. 响应式系统

   • ref 和 reactive 的区别与使用场景
   • computed 计算属性与 watch / watchEffect 监听器
   • 响应式原理（基于 Proxy 的实现，对比 Vue 2 的 Object.defineProperty）

3. Composition API

   • setup() 函数的作用与生命周期
   • 组合式逻辑复用（自定义 Hooks，如 useFetch, useLocalStorage）
   • script setup 语法糖（简化代码，自动暴露变量）

4. 模板语法

   • 指令：v-if/v-show、v-for、v-bind、v-on、v-model（支持多个绑定）
   • 事件修饰符（.stop, .prevent, .once）与按键修饰符
   • 动态 CSS（v-bind 绑定样式）

5. 生命周期钩子

   • 主要钩子：onMounted, onUpdated, onUnmounted 等
   • 对比 Options API 的生命周期（如 beforeCreate → setup()）

---

二、路由与状态管理

1. Vue Router 4

   • 路由配置（动态路由、嵌套路由、命名路由）
   • 导航守卫（beforeEach, beforeResolve）
   • 路由懒加载（import() + defineAsyncComponent）

2. 状态管理

   • Pinia（推荐）：
     • 定义 Store（defineStore）
     • State、Getters、Actions 的使用
     • 插件开发与持久化存储
   • Vuex 4（了解，但 Pinia 更轻量且兼容 Vue 3）

---

三、高级特性

1. 高级 API

   • Teleport（将组件渲染到 DOM 任意位置）
   • Suspense（处理异步组件加载状态）
   • defineExpose（暴露组件内方法给父组件）
   • 自定义指令（v-directive 实现逻辑复用）

2. 渲染函数与 JSX

   • h() 函数的使用场景（动态生成复杂 UI）
   • 在 Vue 3 中配置 JSX 支持

3. TypeScript 集成

   • 类型推导（defineProps 和 defineEmits 的类型声明）
   • 泛型在 Composition API 中的应用
   • 类型安全的 Store（Pinia + TypeScript）

---

四、工程化与工具链

1. 构建工具

   • Vite（核心工具，快速开发与生产构建）
   • 配置环境变量（.env 文件）
   • 插件系统（如 @vitejs/plugin-vue）

2. 代码规范

   • ESLint + Prettier（代码风格与格式化）
   • Husky + Lint-Staged（Git 提交前检查）

3. 测试

   • 单元测试：Vitest 或 Jest
   • 组件测试：Vue Test Utils
   • E2E 测试：Cypress 或 Playwright

---

五、性能优化

1. 代码层面

   • 组件懒加载（路由级或组件级）
   • v-memo 优化渲染性能
   • 使用 shallowRef/shallowReactive 减少不必要的响应式开销

2. 构建优化

   • 代码分割（Vite 自动分割 + 动态导入）
   • Tree Shaking（依赖按需引入）

3. 服务端渲染（SSR）

   • Nuxt 3（基于 Vue 3 的全栈框架）
   • 理解 SSR 原理与 hydration 过程

---

六、生态与扩展

1. UI 框架

   • Element Plus、Ant Design Vue、Vuetify 等
   • Headless UI 库（如 @headlessui/vue）

2. 图表与可视化

   • ECharts、D3.js 或 Vue 专用库（如 vue-chartjs）

3. 移动端开发

   • Vant 4（轻量级移动组件库）
   • 跨端框架（如 UniApp、Taro 支持 Vue 3）

---

七、部署与 DevOps

1. 静态站点部署

   • Vercel、Netlify、GitHub Pages
   • 配置 CI/CD 自动部署

2. Docker 化

   • 容器化 Vue 应用并部署到云服务

---

学习资源推荐

• 官方文档：Vue 3 官方文档
• 实战项目：Todo App、电商后台、实时聊天应用
• 进阶学习：
  • Vue Mastery 视频教程
  • 源码解析（理解 Reactivity 系统、Virtual DOM）

本作品采用《CC 协议》，转载必须注明作者和本文链接