Vue.js 学习知识树
│
├── 第一阶段：前置准备
│ ├── 1. 开发环境搭建
│ │ ├── Node.js 安装与配置
│ │ ├── npm/yarn/pnpm 包管理器
│ │ ├── VSCode + Volar 插件
│ │ └── Vue Devtools 浏览器扩展
│ │
│ ├── 2. HTML/CSS 基础
│ │ ├── 常用标签语义化
│ │ ├── CSS 选择器与盒模型
│ │ ├── Flex/Grid 布局
│ │ └── 响应式设计基础
│ │
│ └── 3. JavaScript 预备知识
│ ├── ES6 核心特性
│ │ ├── let/const 与块级作用域
│ │ ├── 箭头函数与 this 指向
│ │ ├── 模板字符串
│ │ ├── 解构赋值（数组/对象）
│ │ ├── 展开运算符（...）
│ │ ├── 模块化（import/export）
│ │ └── Promise 与异步编程
│ │
│ └── 4. TypeScript 基础（可选但推荐）
│ ├── 类型注解
│ ├── 接口与类型别名
│ └── 泛型入门
│
├── 第二阶段：Vue 基础核心
│ ├── 1. Vue 实例与生命周期
│ │ ├── 创建 Vue 应用实例（createApp）
│ │ ├── 挂载到 DOM（mount）
│ │ ├── 生命周期钩子
│ │ │ ├── beforeCreate / created
│ │ │ ├── beforeMount / mounted
│ │ │ ├── beforeUpdate / updated
│ │ │ ├── beforeUnmount / unmounted
│ │ │ └── activated / deactivated（keep-alive）
│ │ └── 生命周期图示理解
│ │
│ ├── 2. 模板语法
│ │ ├── 文本插值（{{ }}）
│ │ ├── 原始 HTML（v-html）
│ │ ├── 属性绑定（v-bind / :）
│ │ ├── JavaScript 表达式支持
│ │ └── 指令简介
│ │
│ ├── 3. 响应式基础
│ │ ├── 响应式数据原理概述
│ │ ├── reactive（对象响应式）
│ │ ├── ref（原始值响应式）
│ │ ├── computed（计算属性）
│ │ │ ├── 基本用法
│ │ │ ├── getter 与 setter
│ │ │ └── 与方法调用的区别
│ │ └── watch / watchEffect（侦听器）
│ │ ├── 侦听单个数据源
│ │ ├── 侦听多个数据源
│ │ ├── 深度侦听（deep）
│ │ └── 立即执行（immediate）
│ │
│ ├── 4. 条件渲染
│ │ ├── v-if / v-else-if / v-else
│ │ ├── v-show
│ │ ├── v-if vs v-show 区别与选择
│ │ └── template 上的条件渲染
│ │
│ ├── 5. 列表渲染
│ │ ├── v-for 遍历数组
│ │ ├── v-for 遍历对象
│ │ ├── key 属性的作用与重要性
│ │ ├── 数组更新检测
│ │ ├── 对象变更检测注意事项
│ │ └── v-for 与 v-if 的优先级
│ │
│ ├── 6. 事件处理
│ │ ├── v-on / @ 绑定事件
│ │ ├── 事件处理方法
│ │ ├── 内联事件处理器
│ │ ├── 事件修饰符
│ │ │ ├── .stop（阻止冒泡）
│ │ │ ├── .prevent（阻止默认）
│ │ │ ├── .capture（事件捕获）
│ │ │ ├── .self（自身触发）
│ │ │ ├── .once（只触发一次）
│ │ │ └── .passive（提升滚动性能）
│ │ └── 按键修饰符
│ │
│ └── 7. 表单输入绑定
│ ├── v-model 基本用法
│ ├── 不同表单元素的绑定
│ │ ├── 文本输入框
│ │ ├── 多行文本框
│ │ ├── 复选框
│ │ ├── 单选按钮
│ │ └── 选择框
│ ├── 修饰符
│ │ ├── .lazy（change 事件同步）
│ │ ├── .number（自动转数字）
│ │ └── .trim（自动去空格）
│ └── v-model 与组件通信
│
├── 第三阶段：组件化开发
│ ├── 1. 组件基础
│ │ ├── 组件的定义与注册
│ │ │ ├── 全局组件
│ │ │ └── 局部组件
│ │ ├── 单文件组件（.vue 文件结构）
│ │ │ ├── <template> 模板
│ │ │ ├── <script setup> 逻辑
│ │ │ └── <style scoped> 样式
│ │ └── 组件命名规范
│ │
│ ├── 2. 组件通信
│ │ ├── 父传子：props
│ │ │ ├── props 声明
│ │ │ ├── 类型校验与默认值
│ │ │ └── 单向数据流原则
│ │ ├── 子传父：emits
│ │ │ ├── $emit 触发事件
│ │ │ ├── 事件参数传递
│ │ │ └── 事件校验
│ │ ├── 兄弟组件通信
│ │ │ ├── 共同父组件中转
│ │ │ └── 事件总线（Vue2 方式，Vue3 不推荐）
│ │ ├── 跨层级通信
│ │ │ ├── provide / inject
│ │ │ └── 依赖注入的响应式处理
│ │ └── 访问组件实例
│ │ ├── 父访问子：ref
│ │ ├── 子访问父：$parent（不推荐）
│ │ └── 访问根实例：$root
│ │
│ ├── 3. 插槽（Slots）
│ │ ├── 默认插槽
│ │ ├── 具名插槽（v-slot / #）
│ │ ├── 作用域插槽
│ │ │ ├── 向插槽传递数据
│ │ │ └── 解构插槽 props
│ │ └── 动态插槽名
│ │
│ └── 4. 动态组件与异步组件
│ ├── <component :is> 动态组件
│ ├── keep-alive 缓存组件状态
│ ├── 异步组件 defineAsyncComponent
│ └── 代码分割与按需加载
│
├── 第四阶段：组合式 API（Composition API）
│ ├── 1. 为什么需要组合式 API
│ │ ├── 选项式 API 的局限性
│ │ ├── 逻辑复用与组织
│ │ └── 更好的 TypeScript 支持
│ │
│ ├── 2. 核心 API
│ │ ├── setup 函数
│ │ │ ├── 执行时机
│ │ │ ├── 参数：props, context
│ │ │ └── 返回值
│ │ ├── <script setup> 语法糖
│ │ │ ├── 顶层绑定自动暴露
│ │ │ ├── 使用 props（defineProps）
│ │ │ ├── 使用 emits（defineEmits）
│ │ │ └── 使用 slots 和 attrs（useSlots, useAttrs）
│ │ └── 响应式 API 进阶
│ │ ├── ref 与 reactive 深入
│ │ ├── toRef / toRefs（解构不丢失响应性）
│ │ ├── readonly（只读代理）
│ │ ├── shallowRef / shallowReactive（浅层响应式）
│ │ ├── triggerRef（强制触发）
│ │ └── customRef（自定义 ref）
│ │
│ └── 3. 组合式函数（Composables）
│ ├── 逻辑复用的最佳实践
│ ├── 自定义组合式函数命名规范
│ ├── 鼠标位置追踪示例
│ └── 异步数据请求封装
│
├── 第五阶段：Vue 生态路由（Vue Router）
│ ├── 1. 路由基础
│ │ ├── 安装与配置
│ │ ├── 创建 router 实例
│ │ └── 注册到 Vue 应用
│ │
│ ├── 2. 路由模式
│ │ ├── HTML5 History 模式
│ │ └── Hash 模式
│ │
│ ├── 3. 路由定义
│ │ ├── 静态路由配置
│ │ ├── 动态路由匹配（路径参数）
│ │ ├── 嵌套路由
│ │ └── 命名路由 / 命名视图
│ │
│ ├── 4. 路由导航
│ │ ├── 声明式导航（<router-link>）
│ │ ├── 编程式导航（router.push / replace / go）
│ │ └── 路由传参方式
│ │ ├── params
│ │ ├── query
│ │ └── props 解耦
│ │
│ ├── 5. 路由守卫
│ │ ├── 全局守卫
│ │ │ ├── beforeEach / afterEach
│ │ │ └── beforeResolve
│ │ ├── 路由独享守卫
│ │ ├── 组件内守卫
│ │ └── 完整的导航解析流程
│ │
│ └── 6. 路由高级应用
│ ├── 路由元信息（meta）
│ ├── 滚动行为控制
│ ├── 路由懒加载
│ └── 动态添加路由
│
├── 第六阶段：状态管理（Pinia）
│ ├── 1. 状态管理概念
│ │ ├── 为什么需要状态管理
│ │ ├── 单向数据流
│ │ └── Pinia vs Vuex 对比
│ │
│ ├── 2. Pinia 核心
│ │ ├── 安装与配置
│ │ ├── 定义 Store（defineStore）
│ │ ├── State（状态）
│ │ ├── Getters（类似计算属性）
│ │ ├── Actions（支持异步）
│ │ └── 在组件中使用 Store
│ │
│ └── 3. Pinia 进阶
│ ├── Store 之间相互调用
│ ├── 插件系统
│ ├── 状态持久化方案
│ └── 服务端渲染支持
│
├── 第七阶段：工程化与工具链
│ ├── 1. Vue CLI / Vite
│ │ ├── 创建项目（create-vue）
│ │ ├── Vite 核心特性
│ │ ├── 项目目录结构
│ │ ├── 环境变量与模式
│ │ └── 构建与部署
│ │
│ ├── 2. 调试与测试
│ │ ├── Vue Devtools 高级用法
│ │ ├── 单元测试（Vitest）
│ │ │ ├── 测试组件
│ │ │ ├── 测试 Pinia Store
│ │ │ └── 模拟依赖
│ │ └── 端到端测试（Cypress / Playwright）
│ │
│ └── 3. 代码规范
│ ├── ESLint 配置
│ ├── Prettier 格式化
│ ├── Husky + lint-staged
│ └── Git 提交规范
│
├── 第八阶段：Vue 3 新特性与原理
│ ├── 1. Vue 3 核心特性
│ │ ├── 组合式 API
│ │ ├── Fragment（多根节点）
│ │ ├── Teleport（传送门）
│ │ ├── Suspense（异步依赖处理）
│ │ └── 多个 v-model 绑定
│ │
│ ├── 2. 响应式原理
│ │ ├── Proxy 与 Reflect
│ │ ├── reactive 实现原理
│ │ ├── ref 实现原理
│ │ ├── 依赖收集与派发更新
│ │ └── Vue 2 vs Vue 3 响应式对比
│ │
│ └── 3. 虚拟 DOM 与渲染机制
│ ├── 虚拟 DOM 概念
│ ├── 渲染函数（h 函数）
│ ├── Diff 算法优化（PatchFlag）
│ └── 静态提升与缓存
│
├── 第九阶段：实用生态与周边
│ ├── 1. UI 组件库
│ │ ├── Element Plus
│ │ ├── Ant Design Vue
│ │ ├── Naive UI
│ │ └── Vuetify
│ │
│ ├── 2. 网络请求
│ │ ├── axios 封装
│ │ ├── 请求拦截与响应拦截
│ │ ├── 取消请求
│ │ └── 与 Pinia 配合
│ │
│ ├── 3. 实用工具库
│ │ ├── VueUse（组合式工具集）
│ │ ├── day.js（日期处理）
│ │ └── lodash-es（工具函数）
│ │
│ └── 4. 服务端渲染（SSR）
│ ├── Nuxt.js 基础
│ ├── 静态站点生成（SSG）
│ └── 混合渲染模式
│
└── 第十阶段：项目实战（综合应用）
├── 1. 项目规划
│ ├── 需求分析
│ ├── 技术选型
│ ├── 目录结构设计
│ └── 接口文档约定
│
├── 2. 基础架构搭建
│ ├── 项目初始化
│ ├── 路由配置
│ ├── 状态管理配置
│ ├── 网络请求封装
│ └── 样式方案（scss/tailwind）
│
├── 3. 核心功能实现
│ ├── 用户认证与权限
│ ├── 动态路由与菜单
│ ├── 表格与表单处理
│ ├── 文件上传与预览
│ └── 数据可视化（ECharts）
│
├── 4. 性能优化
│ ├── 路由懒加载
│ ├── 组件异步加载
│ ├── 虚拟列表
│ ├── 图片懒加载
│ └── 首屏加载优化
│
├── 5. 部署与 CI/CD
│ ├── 构建与打包
│ ├── 部署到 Nginx
│ ├── Docker 容器化
│ └── 自动化部署流水线
│
└── 6. 项目总结
├── 问题复盘
├── 性能分析报告
└── 可复用的组件沉淀
学习路线建议
按照这个知识树，建议的学习顺序如下：
-
第一阶段 → 第二阶段：打好基础，理解 Vue 核心概念
-
第三阶段：掌握组件化开发思想
-
第四阶段：学习组合式 API（Vue 3 精髓）
-
第五、六阶段：学习生态核心（路由和状态管理）
-
第七阶段：工程化配置
-
第八阶段：深入原理（可选，进阶）
-
第九阶段 → 第十阶段：实践出真知
每个节点都可以作为一个独立的学习单元，建议按照树状结构从上到下、从左到右逐步推进。每学习完一个分支，尝试写一个小 demo 来巩固。当完成整个知识树时，你将成为一名合格的 Vue 开发者。