Vue概述一、Vue 是什么二、核心设计思想MVVM三、核心特性详解1. 响应式系统Reactivity2. 组件化Component3. 虚拟 DOMVirtual DOM4. 模板语法与指令系统5. 两种 API 风格6. 生命周期四、Vue 项目结构五、Vue 生态体系六、Vue 2 vs Vue 3 主要区别七、优缺点分析八、适用场景九、快速上手示例一、Vue 是什么Vue.js读音 /vjuː/类似于 “view”是一套用于构建用户界面的渐进式 JavaScript 框架由尤雨溪Evan You于 2014 年首次发布。渐进式意味着你可以把 Vue 当作一个轻量的增强库引入现有页面也可以配合路由Vue Router、状态管理Pinia、构建工具Vite等搭建出复杂的大型单页应用SPA。Vue 的核心库只关注视图层易于上手也便于与第三方库或既有项目整合。二、核心设计思想MVVMVue 是一个典型的 MVVMModel-View-ViewModel 框架层级说明Model数据模型层普通 JavaScript 对象{ }View视图层DOM / HTML 模板ViewModelVue 实例负责连接 Model 与 View实现双向数据绑定当 Model 数据变化时View 自动更新用户在 View 中操作时Model 也同步变化——无需手动操作 DOM。三、核心特性详解1. 响应式系统ReactivityVue 3 基于 Proxy 重构了响应式系统Vue 2 使用 Object.defineProperty能自动追踪数据变化并更新视图constappVue.createApp({data(){return{message:Hello Vue!}}}).mount(app)每个绑定data属性的组件都有一个 Watcher 检测数据变化一旦检测到改变就重新渲染该组件。2. 组件化Component将一个大型应用拆分成多个小的、独立的、可复用的组件每个.vue单文件组件包含template div classcontainer h1{{ title }}/h1 button clickadd1/button /div /template script export default { data() { return { title: Welcome to Vue.js } }, methods: { add() { this.title Updated! } } } /script style .container { text-align: center; color: blue; } /style组件化的优势提高开发效率方便重复使用简化调试步骤提升项目可维护性便于协同开发3. 虚拟 DOMVirtual DOM传统操作 DOM 会频繁触发浏览器渲染导致页面卡顿。Vue 的做法用 JavaScript 计算出 DOM 操作虚拟 DOM与真实 DOM 进行 diff 比较只更新变化的部分批量提交到真实 DOM这大大提升了渲染性能。4. 模板语法与指令系统Vue 使用类似 HTML 的模板语法通过v-前缀的指令实现各种功能指令作用示例v-bind/:绑定属性a :hrefurlv-model双向绑定表单input v-modelmsgv-if/v-else条件渲染p v-ifokYES/pv-show条件显示CSS 切换p v-showokv-for列表渲染li v-foritem in listv-on/事件监听button clickaddv-text文本插值span v-textmsg插值语法{{ }}也叫胡子语法Moustache用于渲染 data 中的值或简单表达式。5. 两种 API 风格选项式 APIOptions API组合式 APIComposition API特点按data、methods、computed、watch等选项组织用setup()、ref、reactive等函数组合逻辑适用场景Vue 2 / 小型项目Vue 3 推荐 / 大型项目优势简单直观易于上手逻辑复用更好代码组织更灵活6. 生命周期每个 Vue 组件都经历创建 → 挂载 → 更新 → 销毁主要钩子函数钩子时机beforeCreate实例初始化之后数据观测之前created数据已观测可访问 databeforeMount挂载开始之前mounted挂载完成可访问 DOMbeforeUpdate数据更新时updated视图更新后beforeUnmount卸载之前unmounted卸载完成四、Vue 项目结构以 Vite Vue 3 项目为例project/ ├── public/ 静态资源不打包直接复制 ├── src/ │ ├── assets/ 需要打包处理的静态资源 │ ├── components/ 可复用组件 │ ├── views/ 页面级组件路由对应 │ ├── router/ 路由配置 │ ├── api/ 接口请求封装 │ ├── store/ 状态管理Pinia │ ├── App.vue 根组件 │ ├── main.js 入口文件 │ └── style.css 全局样式 ├── index.html 入口 HTML ├── package.json 项目配置 ├── vite.config.js Vite 构建配置 └── .gitignore项目运行核心流程npm run dev → Vite 读取 vite.config.js 配置 → 找到入口 index.html → index.html 引入 src/main.js → main.js 创建 Vue 实例挂载到 app 节点 → 渲染根组件 App.vue → 递归渲染 App.vue 内的所有子组件五、Vue 生态体系工具/库用途Vite新一代构建工具替代 Vue CLI/webpack启动极快Vue Router单页应用路由管理Pinia状态管理替代 VuexVue 3 官方推荐Vue Devtools浏览器调试插件查看组件树、状态、事件Element Plus / Vuetify / Ant Design VueUI 组件库AxiosHTTP 请求库六、Vue 2 vs Vue 3 主要区别特性Vue 2Vue 3响应式Object.definePropertyProxy性能更好可检测属性增删API选项式为主组合式 APIsetup 选项式兼容组件选项式支持script setup语法糖状态管理VuexPinia更简洁、TypeScript 友好构建工具Vue CLI (webpack)Vite推荐TypeScript需要额外配置原生支持非常友好新特性—Fragment、Teleport、Suspense 等七、优缺点分析✅ 优点轻量级核心库几十 KB不依赖第三方库易学易用基于 HTML/CSS/JS学习曲线平缓组件化 响应式开发效率高代码可维护虚拟 DOM性能优异生态丰富大量插件、UI 库、工具链渐进式可从小到大灵活采用⚠️ 缺点版本更新频繁Vue 2 → 3 有较大 breaking changes老项目迁移成本高不够标准化无强制编码规范团队风格可能不一致不支持 IE8 及以下需要额外 polyfill社区规模相比 React 全球社区略小但在国内非常流行八、适用场景适合 ✅不太适合 ❌需要快速开发迭代的项目需要严格编码规范的大型团队项目高度交互、动态更新的 SPA需要支持 IE8 等老旧浏览器的项目与现有项目逐步集成需要极度成熟稳定的企业级方案可考虑 Angular管理后台、电商、小程序等超大型应用且团队无 Vue 经验九、快速上手示例!DOCTYPEhtmlhtmlheadscriptsrchttps://cdn.jsdelivr.net/npm/vue3/dist/vue.global.js/script/headbodydividapph1{{ message }}/h1inputv-modelmessage/ulliv-for(item, index) in items:keyindex{{ item }}/li/ul/divscriptconstappVue.createApp({data(){return{message:Hello Vue 3!,items:[学习,实践,掌握]}}}).mount(app)/script/body/html