Vue.js：现代前端开发的渐进式框架-编程实验室

一、引言

前端框架的演进与 Vue.js 的诞生
Vue.js 的核心特点：
- 渐进式 (Progressive)
- 易学易用 (Approachable)
- 高性能 (Performant)
- 响应式数据绑定 (Reactive)
- 组件化 (Component-Based)
适用场景与社区生态

Vue 实例与选项
- data：响应式数据源
- methods：定义方法
- computed：计算属性 (缓存、依赖追踪)
- watch：侦听器 (观察数据变化)
- props：接收父组件数据
- components：注册子组件
模板语法
- 插值：{{ }}
- 指令：
  - v-bind/:：动态绑定属性
  - v-model：表单输入双向绑定
  - v-if/v-else/v-else-if/v-show：条件渲染
  - v-for：列表渲染
  - v-on/@：事件监听
  - v-html：输出原始 HTML (谨慎使用)
  - v-pre/v-cloak/v-once：特殊指令
- 模板表达式(JavaScript 表达式)
生命周期钩子
- beforeCreate/created
- beforeMount/mounted
- beforeUpdate/updated
- beforeDestroy/destroyed
- 理解各个阶段的作用

组件基础

单文件组件 (.vue文件) 的优势

<template> <!-- HTML 模板 --> </template> <script> // JavaScript 逻辑 </script> <style> /* CSS 样式 */ </style>

组件通信
- Props 向下传递数据(父 -> 子)
- 自定义事件向上传递信息(子 -> 父)
- $refs访问子组件实例/元素
- Provide / Inject(祖先 -> 后代)
- 全局事件总线 (EventBus)(简单场景)
- 状态管理库 (如 Vuex/Pinia)(复杂应用)
插槽
- 默认插槽 (<slot>)
- 具名插槽 (<slot name="...">/v-slot:...)
- 作用域插槽 (传递数据给插槽内容)
动态组件与异步组件
- <component :is="...">
- defineAsyncComponent

数据劫持与依赖追踪
- Object.defineProperty(Vue 2) 与Proxy(Vue 3) 的差异
- 响应式数据的限制与处理方式 (如数组、对象新增属性)
虚拟 DOM (Virtual DOM) 与 Diff 算法
- 概念与优势
- Vue 如何高效更新视图

为什么需要状态管理？(共享状态、复杂组件通信)
Vuex 核心概念：
- State：单一状态树
- Getters：派生状态
- Mutations：同步更改状态 (唯一途径)
- Actions：异步操作、提交Mutations
- Modules：模块化组织
Pinia 介绍 (现代推荐)：
- 与 Vuex 的对比 (更简洁、TypeScript友好、Composition API风格)
- 核心概念 (store,state,getters,actions)
状态管理最佳实践

SPA (单页面应用) 与路由需求
Vue Router 核心概念：
- 路由配置 (routes)
- 路由视图 (<router-view>)
- 导航链接 (<router-link>)
- 编程式导航 (router.push,router.replace,router.go)
- 路由参数 (params,query)
- 导航守卫 (beforeEach,beforeResolve,afterEach, 组件内守卫)
- 路由懒加载
嵌套路由与命名视图

Composition API (Vue 3 重点)
- 解决 Options API 的局限性 (逻辑复用、类型推断)
- 核心函数：setup(),ref(),reactive(),computed(),watch(),watchEffect(), 生命周期钩子函数
- 组合式函数 (Composables) 编写与复用
渲染函数 & JSX
- 使用 JavaScript 完全编程能力构建模板
- 适用场景 (高阶组件、动态模板生成)
TypeScript 集成
- Vue 3 对 TS 的友好支持
- 为组件、状态、路由等提供类型定义
自定义指令
- 全局指令 (Vue.directive) 与局部指令
- 钩子函数 (bind,inserted,update,componentUpdated,unbind)
- 使用场景 (DOM 操作、权限控制等)
混入 (Mixins) 与插件 (Plugins)
- Mixins 的使用与局限性
- 编写 Vue 插件 (install方法)

Vue CLI：快速搭建标准化项目
Vite：下一代前端构建工具 (极速开发体验)
开发调试工具(Vue Devtools)
测试(单元测试、组件测试、端到端测试)
性能优化
- 代码分割 (路由懒加载、组件异步加载)
- 虚拟列表 (vue-virtual-scroller)
- 避免不必要的渲染 (v-once,v-memo)
- 使用生产环境构建