Vue 知识体系概览
什么是 Vue？
Vue.js 是一套渐进式 JavaScript 框架，由尤雨溪（Evan You）于 2014 年创建。"渐进式"意味着你可以只用 Vue 的核心功能（视图层），也可以逐步引入路由（Vue Router）、状态管理（Pinia）、构建工具（Vite）等生态工具，按需组合成完整的应用方案。
Vue 的设计哲学是让开发者能以最小的心智负担写出响应式的 UI。它的模板语法接近原生 HTML，学习曲线平缓，同时底层又足够强大。
<script setup>
import { ref } from 'vue'
// 用 ref 创建一个响应式变量
const count = ref(0)
</script>
<template>
<!-- 模板中直接使用响应式变量 -->
<button @click="count++">点击了 {{ count }} 次</button>
</template>
上面几行代码就实现了一个可交互的计数器——count 变化时，页面自动更新。这背后的魔法就是 Vue 的响应式系统。
Vue 和 React 有什么区别？
这是面试中最常见的对比题之一：
| 维度 | Vue | React |
|---|---|---|
| 模板 vs JSX | HTML 模板（有编译优化） | JSX（JavaScript 表达式） |
| 响应式 | 自动追踪依赖（Proxy） | 手动声明依赖（useState/useEffect） |
| 更新粒度 | 组件级精确更新 | 自上而下重新渲染 |
| API 风格 | Options API + Composition API | Hooks（函数式） |
| 生态 | 官方提供全家桶（Router/Pinia/Vite） | 社区驱动，选择多样 |
| 国内使用 | 国内占比最高 | 国际使用最广泛 |
Vue 的响应式是"自动的"——你修改了一个变量，Vue 自动知道哪些组件用到了这个变量，只更新那些组件。React 的更新是"手动的"——setState 会触发整个组件子树重新渲染，需要你用 useMemo、React.memo 手动优化。
核心知识点概览
响应式系统——Vue 的灵魂
Vue 3 使用 Proxy 实现响应式（Vue 2 用的是 Object.defineProperty）。当你用 ref() 或 reactive() 创建响应式数据时，Vue 会在背后创建一个 Proxy 对象来拦截数据的读取和修改——读取时收集依赖（记住谁用了这个数据），修改时触发更新（通知所有依赖方重新渲染）。
面试中"Vue 3 为什么从 Object.defineProperty 换成 Proxy"是超高频考题——Proxy 能监听属性的新增/删除、能直接监听数组、性能更好。
虚拟 DOM 与 Diff 算法
和 React 类似，Vue 也使用虚拟 DOM 来高效更新页面。Vue 3 的 Diff 算法借鉴了 ivi 和 inferno 的最长递增子序列（LIS） 算法，在处理列表更新时比 React 的 Diff 更高效。
Composition API vs Options API
Vue 3 引入了 Composition API（组合式 API），让你用函数（而非对象属性）来组织组件逻辑。它类似 React Hooks 的理念——将同一个功能的状态、方法、生命周期放在一起，而不是分散在 data、methods、mounted 等不同选项中。<script setup> 语法是 Composition API 的语法糖，也是 Vue 3 推荐的写法。
模板编译
Vue 的模板不是直接被浏览器解析的——它会经过编译器转换为渲染函数（render function）。编译过程分为三步：Parse（解析模板为 AST）→ Transform（优化，如标记静态节点）→ Generate（生成渲染函数代码）。编译时的静态提升和补丁标记（Patch Flags） 是 Vue 3 性能提升的关键。
Vue 生态
Vue 有一套官方维护的"全家桶"：Vue Router（路由管理，支持 Hash 和 History 模式）、Pinia（状态管理，Vuex 的继任者）、Vite（构建工具）。面试中 Vue Router 的导航守卫、Pinia 的 Store 设计都是常见考点。
学习建议
- Proxy 响应式 + 依赖收集 → Vue 的核心灵魂，面试必考
- 虚拟 DOM + Diff + 模板编译 → 渲染机制全链路
- Composition API + 组件通信 → Vue 3 开发必备
- keep-alive + 生命周期 → 常见面试考点
- Vue Router + Pinia → 生态工具
- Vue 2 vs Vue 3 → 迁移经验高频考点