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 应用并部署到云服务

3、学习资源推荐

* 官方文档：Vue 3 官方文档
* 实战项目：Todo App、电商后台、实时聊天应用

进阶学习：

* Vue Mastery 视频教程
* 源码解析（理解 Reactivity 系统、Virtual DOM）

————————————————
原文作者：guoliang1994
转自链接：https://learnku.com/articles/89746