一、Vue概述简单来说Vue发音类似 “view”是一个用于构建用户界面的渐进式 JavaScript 框架。通俗理解以前我们写网页需要手动去找到页面上的按钮、输入框然后修改里面的文字或隐藏它们。而有了 Vue你只需要关心“数据”比如一个变量 message ‘你好’Vue 会自动帮你把页面上的内容更新。实际开发例子比如做一个电商购物车你只需要在 Vue 里把商品数量加 1页面上的总价和数量就会自动变化完全不需要你手动去操作 DOM 元素。1、框架定位与优势Vue 的核心定位是“渐进式”。这意味着你可以根据项目需求灵活地选择使用 Vue 的哪些部分。它既可以像 jQuery 一样通过 CDN 引入用于增强现有页面的交互性也可以结合其完整的生态系统如 Vue Router、Pinia、Vite用于构建复杂的单页应用程序SPA。这种设计使得 Vue 的学习曲线平缓上手门槛低同时又能满足大型、高性能应用的需求。2、核心设计思想Vue 的设计融合了声明式编程和响应式数据绑定的思想。开发者通过声明式的模板语法来描述最终希望呈现的 UI 状态而 Vue 的响应式系统会自动追踪数据依赖并在数据变化时高效地更新 DOM。这极大地简化了开发者手动操作 DOM 的繁琐工作让开发者可以更专注于业务逻辑本身。二、Vue实例Vue 实例就是 Vue 应用的“大管家”或者“发动机”。通俗理解你写好了 HTML 页面和 JavaScript 数据需要一个东西把它们绑定在一起这个“中间人”就是 Vue 实例。实际开发例子在 Vue 3 中我们通常用 createApp() 来创建一个应用实例然后把它“挂载”到页面上一个空的div idapp/div上。这样这个 div 里面的内容就归 Vue 管了。import{createApp,ref}fromvuecreateApp({setup(){return{count:ref(0)}}}).mount(#app)dividappbuttonclickcountCount is: {{ count }}/button/div1、实例的创建与挂载在 Vue 3 中createApp函数用于创建一个新的应用实例。每个 Vue 应用都是通过此函数创建的。实例创建后必须调用.mount()方法将其“挂载”到一个 DOM 元素上这个元素通常是一个空的容器如#app。挂载后Vue 会接管该容器内的所有 DOM并开始其响应式渲染和更新周期。2、根组件与配置传递给createApp的对象被称为“根组件”。这个对象定义了应用的行为可以包含数据、方法、生命周期钩子等。在 Vue 3 的组合式 API 中通常使用setup()函数来定义组件的逻辑。一个应用实例只能挂载一次但可以拥有多个组件实例。三、Vue 的核心声明式渲染你只需要“声明”数据和界面的关系。比如{{ name }}你告诉 Vue 这里显示 name 的值就行了至于怎么更新Vue 自己会处理。响应性数据变视图自动变。这是 Vue 最核心的魔法。你修改了 JS 里的变量网页会自动刷新对应的位置。渐进式框架Vue 非常灵活。你可以只在一个老网页里引入 Vue 来做一个小按钮像 jQuery 一样用也可以配合路由Vue Router、状态管理Pinia构建一个极其复杂的单页应用SPA。1、声明式渲染详解Vue 使用基于 HTML 的模板语法允许开发者声明式地将数据绑定到 DOM。在底层Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统当应用状态改变时Vue 能够智能地计算出最少需要重新渲染的组件并应用最少的 DOM 操作。2、响应式系统原理Vue 3 使用 JavaScript 的 Proxy 对象来实现响应式。当你创建一个响应式对象如使用ref或reactive时Vue 会跟踪对该对象的每一个属性的访问和修改。当属性被修改时Vue 会通知所有依赖该属性的组件进行更新。这使得状态管理变得直观且高效。3、渐进式采用路径Vue 的渐进式体现在你可以根据项目阶段逐步采用其功能静态页面增强通过script标签引入 Vue用于局部交互。单文件组件 (SFC)使用.vue文件组织模板、逻辑和样式构建更复杂的界面。客户端路由引入 Vue Router 管理多页面视图。状态管理引入 Pinia 管理跨组件的共享状态。服务端渲染 (SSR)使用 Nuxt.js 等框架提升首屏性能和 SEO。四、API 风格1、选项式 API (Options API)把代码按类型分类。数据放 data方法放 methods生命周期放 mounted。优点结构清晰对新手和面向对象开发者很友好。缺点组件变大后一个功能的代码会被拆散到各个选项里来回找代码很痛苦。script export default { // data() 返回的属性将会成为响应式的状态 // 并且暴露在 this 上 data() { return { count: 0 } }, // methods 是一些用来更改状态与触发更新的函数 // 它们可以在模板中作为事件处理器绑定 methods: { increment() { this.count } }, // 生命周期钩子会在组件生命周期的各个不同阶段被调用 // 例如这个函数就会在组件挂载完成后被调用 mounted() { console.log(The initial count is ${this.count}.) } } /script template button clickincrementCount is: {{ count }}/button /template2、组合式 API (Composition API)Vue 3 主推。把同一个功能的代码数据、方法、生命周期写在一起。通常配合script setup语法糖使用。优点逻辑高内聚代码复用性极强对 TypeScript 支持极好。script setup import { ref, onMounted } from vue // 响应式状态 const count ref(0) // 用来修改状态、触发更新的函数 function increment() { count.value } // 生命周期钩子 onMounted(() { console.log(The initial count is ${count.value}.) }) /script template button clickincrementCount is: {{ count }}/button /template3、API 风格怎么选官方建议如果是新项目、复杂业务、大型项目无脑选 Vue 3 组合式 API。如果是极其简单的页面或者维护很老的 Vue 2 项目可以使用选项式 API。对比维度选项式 API (Options API)组合式 API (Composition API)代码组织按选项类型data, methods组织按逻辑功能组织逻辑复用Mixins易冲突组合式函数 (Composables)TypeScript 支持支持但体验一般一流的类型推断支持学习曲线较低更符合传统 OOP 思维较高需要理解响应式 API适用场景简单应用、Vue 2 项目迁移、新手入门大型复杂应用、需要良好类型支持、追求代码复用五、Vue2生命周期生命周期就是组件从“出生”到“死亡”的过程。Vue 2 的流程如下创建阶段beforeCreate刚出生啥也没有拿不到数据。created数据准备好了但页面还没渲染。实际开发中通常在这里发网络请求Ajax获取初始数据。挂载阶段beforeMount模板编译好了准备塞进页面。mounted页面真实渲染出来了。实际开发中如果要操作 DOM 或初始化第三方插件如 ECharts 图表必须在这里做。更新阶段beforeUpdate数据变了页面还没更新。updated页面更新完毕。注意千万别在这里修改数据会导致死循环销毁阶段beforeDestroy准备销毁。实际开发中必须在这里清理定时器、解绑全局事件防止内存泄漏。destroyed彻底销毁。1、生命周期图示与阶段说明Vue 2 的生命周期可以清晰地分为四个主要阶段创建、挂载、更新、销毁。每个阶段都提供了对应的钩子函数允许开发者在特定时机执行代码。理解这些钩子的执行顺序对于进行资源初始化、DOM 操作、性能优化和清理工作至关重要。2、常用钩子函数实践created: 最常见的异步数据请求位置因为此时实例的数据观测已初始化但 DOM 还未生成。mounted: 确保 DOM 已渲染是初始化依赖 DOM 的第三方库如图表库、地图库或执行 DOM 操作的最佳时机。beforeDestroy: 进行资源清理的“最后机会”务必在此移除事件监听器、清除定时器、取消未完成的网络请求以避免内存泄漏。六、Vue3生命周期Vue 3 的底层逻辑变了但流程类似。最大的变化是引入了 setup() 函数它替代了 Vue 2 的 beforeCreate 和 created。执行流程setup() 执行 - onBeforeMount - DOM 挂载 - onMounted - 数据更新触发 onBeforeUpdate - onUpdated - 卸载触发 onBeforeUnmount - onUnmounted。实际开发中的变化初始化数据、发请求直接写在 setup() 里或者写在 onMounted 里。销毁清理工作放在 onUnmounted 里Vue 3 还会自动帮你清理一部分内部的响应式副作用。钩子函数变成了 onXxx 的形式需要手动 import { onMounted } from ‘vue’。1、组合式 API 下的生命周期在组合式 API 中生命周期钩子以函数的形式提供需要在setup()函数或script setup中同步调用。它们接收一个回调函数作为参数。这种设计使得与生命周期相关的代码可以和它所属的逻辑功能写在一起提高了代码的内聚性。import{onMounted,onUnmounted}fromvueonMounted((){console.log(组件已挂载)// 初始化图表等操作})onUnmounted((){console.log(组件即将卸载)// 清理工作})2、setup() 函数的执行时机setup()函数在beforeCreate钩子之前调用。在setup()中你无法访问this因为此时组件实例尚未被创建。setup()的返回值将暴露给模板和组件的其他选项如计算属性、方法等。在setup()中定义的响应式状态和函数构成了组件逻辑的核心。七、Vue2与 Vue3区别响应式原理不同Vue 2 用 Object.defineProperty。缺点无法监听数组索引的改变新增对象属性不生效必须用 this.$set。Vue 3 用 ES6 的 Proxy。优点全面拦截数组、对象新增删除都能完美监听性能更好。API 风格与逻辑复用Vue 2 依赖 mixins 复用代码容易导致命名冲突和代码来源不清晰。Vue 3 使用组合式 API自定义 Hooks/Composables逻辑复用干净清爽互不干扰。性能与打包体积Vue 3 引入了“静态提升”、“Patch Flags”等编译优化运行时更快。Vue 3 支持 Tree-shaking没用到的代码不会被打包核心包体积更小。新特性Vue 3 支持多根节点Fragment不再强制要求最外层必须包一个div。Vue 3 新增了Teleport传送门做弹窗神器和Suspense处理异步组件加载。生态升级状态管理Vuex 变成了更轻量的 Pinia。构建工具Webpack/Vue CLI 变成了更快的 Vite。1、响应式原理对比详解Vue 2 (Object.defineProperty): 通过递归遍历数据对象对每个属性使用Object.defineProperty设置 getter/setter。这导致无法检测到对象属性的添加或删除以及对数组索引和长度的直接修改。需要使用Vue.set或Vue.delete等特殊方法。Vue 3 (Proxy): 使用Proxy代理整个对象可以拦截对象的所有基本操作包括属性的增删、数组的索引修改等。这提供了更全面、性能更好的响应式能力且初始化时无需递归遍历所有属性。2、编译与运行时优化Vue 3 在编译器层面做了大量优化静态提升 (Static Hoisting): 将纯静态的节点提升到渲染函数之外在每次重渲染时复用相同的 VNode。Patch Flags: 在编译时对动态节点进行标记使得运行时可以跳过对静态节点的对比直接定位到需要更新的动态部分。Tree-shaking: 基于 ES Module 的模块化配合构建工具可以消除未使用的代码如未使用的指令、组件减小最终打包体积。3、新特性应用场景Fragment: 允许组件模板有多个根节点简化了组件结构无需额外的包装 div。Teleport: 可以将组件的一部分模板“传送”到 DOM 中其他位置非常适合实现全局模态框、通知、工具栏等。Suspense: 提供了一种声明式的方式来处理异步组件加载过程中的等待状态和错误处理改善了用户体验。