Vue 98道高频面试题及详细答案（实战版）

Vue98道高频面试题及详细答案（实战版）一、Vue基础核心（1-20题）1、说说你对Vue的理解？Vue是一套轻量级、渐进式的前端MVVM框架，专注于视图层开发。核心特点是数据驱动视图、组件化开发，上手门槛低，灵活性强。渐进式体现在可以只用基础视图渲染，也可以搭配路由、状态管理、脚手架搭建完整项目，适配中小型项目和大型中台项目。相比原生JS，它摒弃了手动操作DOM的逻辑，通过数据响应式自动更新视图，极大提升开发效率。2、MVVM原理是什么？M、V、VM分别指什么？MVVM是数据和视图分离的设计模式，核心是双向数据绑定。M指Model（数据层），就是项目中的data、接口返回数据；V指View（视图层），也就是页面DOM结构；VM指ViewModel（视图模型层），是Vue的核心实例，负责连接数据层和视图层。ViewModel会监听Model的数据变化，自动更新视图；同时监听视图的用户操作，反向修改数据，实现视图和数据的自动同步，无需开发者手动操作DOM。3、Vue2和Vue3的核心区别？1、底层架构：Vue2基于OptionsAPI，选项式写法，代码分散；Vue3支持OptionsAPI和CompositionAPI，组合式API可以按功能聚合代码，适合大型项目。2、响应式原理：Vue2使用Object.defineProperty监听属性，无法监听新增、删除属性和数组下标、长度变化；Vue3使用Proxy代理整个对象，完美支持所有数据场景。3、打包体积：Vue3移除了冗余API，支持按需引入，体积更小、运行更快。4、生命周期：Vue3部分生命周期更名，新增setup、onRenderTriggered等钩子。5、TS支持：Vue3原生适配TypeScript，类型校验更完善，Vue2对TS支持较弱。4、Vue的核心特性有哪些？核心特性包含：数据响应式、双向数据绑定、组件化开发、虚拟DOM、diff算法、指令系统、生命周期、计算属性、侦听器、插槽、过渡动画。5、什么是渐进式框架？渐进式指Vue的使用方式可灵活选择，无强制门槛。新手可以只引入VueCDN，实现简单页面渲染；中小型项目可以用基础语法开发；大型项目可以搭配VueRouter、Vuex/Pinia、Vite、TS全套生态搭建，按需集成功能，不会强制绑定全家桶。6、data为什么必须是函数？主要为了避免组件复用产生的数据污染。如果data是对象，所有复用的组件实例会共享同一个对象地址，一个组件修改数据，其他组件数据会同步变化。而data是函数时，每个组件实例都会调用函数，返回一个全新的独立对象，每个组件的数据相互独立，互不影响。根组件的data可以写对象，因为根组件只会实例化一次。7、Vue的单向数据流是什么？单向数据流是Vue组件传值的核心规则：父组件可以向子组件传递props数据，子组件不能直接修改props数据，只能使用。如果子组件直接修改，会报错且污染父组件数据源。如果需要修改，必须通过事件触发父组件修改，或者在子组件内部拷贝一份props数据再修改，保证数据流向可追溯。8、v-if和v-show的区别及使用场景？区别：1、渲染机制：v-if是惰性渲染，条件为true才会创建DOM节点，false则销毁节点；v-show是始终渲染DOM，只是通过CSS的display属性控制显示隐藏。2、性能消耗：v-if切换消耗大（频繁创建销毁DOM），初始渲染消耗小；v-show初始渲染消耗大，切换消耗极小。3、生命周期：v-if切换会触发组件的创建和销毁生命周期；v-show不会触发任何生命周期。使用场景：频繁切换显示隐藏的场景用v-show；页面加载后条件很少变化、一次性渲染的场景用v-if。9、v-for为什么要加key？key的作用？Vue的diff算法会通过key识别节点身份，精准对比新旧虚拟DOM。key的核心作用是唯一标识节点，提升diff对比效率，避免节点复用错乱。如果不加key，Vue会默认复用相邻节点，列表增删时可能出现数据和DOM绑定错乱、状态残留的问题。注意：key不要用index，列表删除、插入数据时index会重置，导致key失效，最好用后端返回的唯一ID。10、v-for和v-if为什么不建议一起使用？Vue编译时，v-for的优先级高于v-if，一起使用时会先循环渲染所有节点，再根据条件筛选删除，造成无效循环，极大浪费性能。优化方案：外层用v-if做条件判断，内层元素使用v-for循环；或者通过计算属性提前过滤数据，再循环渲染。11、Vue常用指令有哪些？基础指令：v-text（渲染文本）、v-html（渲染富文本）、v-show（显示隐藏）、v-if/v-else/v-else-if（条件渲染）、v-for（列表循环）、v-bind（动态绑定属性，简写:）、v-on（绑定事件，简写@）、v-model（双向绑定）、v-once（一次性渲染）、v-pre（跳过编译）、v-cloak（解决插值闪烁）。12、v-model的实现原理？v-model是语法糖，本质是v-bind绑定value属性+v-on监听input事件。表单元素渲染时，通过v-bind将数据绑定到表单value；用户输入内容时，触发input事件，实时修改绑定的数据，从而实现双向同步。不同表单元素（单选、复选、下拉框）会适配对应的事件和属性。13、如何自定义指令？自定义指令的生命周期？Vue支持全局和局部自定义指令，用于处理原生DOM操作，适合封装通用DOM逻辑（防抖、聚焦、权限控制）。Vue2指令生命周期：bind、inserted、update、componentUpdated、unbind。Vue3指令生命周期：created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。常用场景：页面自动聚焦、按钮防抖、图片懒加载、权限隐藏元素。14、v-cloak的作用？解决Vue插值表达式闪烁问题。页面加载速度快时，Vue实例未编译完成，页面会短暂显示{{xxx}}插值语法。通过[v-cloak]样式隐藏元素，编译完成后自动移除该属性，消除闪烁。15、v-once的作用？标记元素或组件只渲染一次，首次渲染完成后，后续数据更新不会重新渲染该节点。适合静态文本、固定展示的内容，减少DOM渲染开销，优化性能。16、Vue插值表达式支持哪些写法？有什么限制？支持变量、简单运算、三元表达式、函数调用。限制：不支持语句（if、for）、不支持变量赋值、不支持复杂逻辑，复杂逻辑建议写在计算属性或方法中。17、为什么避免v-html？1、存在XSS攻击风险，会解析恶意代码；2、会覆盖子节点内容；3、破坏Vue数据驱动特性，容易出现DOM和数据不同步问题；4、不利于页面样式统一维护。18、Vue中this的指向？普通methods、生命周期钩子中this指向Vue实例；箭头函数中this不绑定Vue实例，会指向全局window，所以Vue方法中禁止使用箭头函数，会导致无法获取data、methods中的数据和方法。19、Vue页面闪烁的解决方案？1、使用v-cloak指令配合样式隐藏插值；2、初始化数据时设置默认值，避免空值闪烁；3、使用v-if等待数据加载完成再渲染页面；4、路由全局守卫控制页面渲染时机。20、Vue中如何监听原生事件？普通标签直接使用@事件名即可；自定义组件需要加.native修饰符（Vue2），Vue3移除.native，自定义组件可直接绑定原生事件。二、计算属性与侦听器（21-30题）21、computed和methods的区别？1、缓存机制：computed有缓存，依赖数据不变时，多次调用只执行一次；methods无缓存，每次渲染都会重新执行。2、调用方式：computed是属性调用，无需加括号；methods是函数调用，需要加括号。3、适用场景：computed适合数据计算、筛选、拼接等依赖数据变化的逻辑；methods适合事件触发、频繁操作的逻辑。22、computed和watch的区别？1、功能定位：computed是计算属性，用于多数据联动计算、简洁处理派生数据；watch是侦听器，用于监听数据变化，执行异步操作、复杂逻辑。2、缓存：computed有缓存，watch无缓存。3、数据依赖：computed依赖多个数据可统一计算；watch只能监听指定单个/多个数据变化。4、使用场景：简单数据推导用computed；异步请求、数据变化后续复杂操作用watch。23、computed的get和set怎么用？computed默认只有getter（只读），只能读取不能修改。需要双向修改时，可配置get和set方法。get用于获取计算后的数据，set用于监听计算属性的修改，反向修改原依赖数据。日常开发大部分场景只用getter。24、watch的immediate和deep属性作用？immediate：默认false，页面初始化时不执行监听；设为true，页面加载完成立即执行一次监听回调。deep：默认false，无法监听对象、数组的内部属性变化；设为true，开启深度监听，可监听复杂数据内部值的修改。25、watch如何监听多个数据？1、将多个数据放到同一个对象中统一监听；2、使用数组形式，配置多个监听规则；3、通过computed整合多个数据，再监听计算属性。26、计算属性可以异步吗？不可以。computed设计初衷是同步计算、返回数据，不支持异步回调、Promise。如果需要异步逻辑，必须使用watch。27、侦听器可以计算数据吗？可以，但不推荐。watch侧重监听变化执行逻辑，代码冗余、无缓存；简单数据计算优先用computed，更简洁高效。28、computed缓存的原理？Vue会缓存computed的计算结果，同时收集其依赖的响应式数据。只有依赖数据发生变更时，才会重新计算；否则直接读取缓存值，避免重复计算，提升性能。29、watch和watchEffect的区别（Vue3）？1、watch需要手动指定监听数据源；watchEffect自动收集依赖，无需手动指定。2、watch默认惰性执行，需配置immediate才初始化执行；watchEffect默认初始化立即执行。3、watch可以获取新旧值；watchEffect只能获取最新值，无旧值。4、watch适合精准监听指定数据；watchEffect适合自动追踪依赖的副作用逻辑。30、什么时候优先用computed，什么时候用watch？数据派生、简单计算、多数据整合、需要缓存→computed；异步请求、数据变化后执行复杂操作、DOM操作、多步骤逻辑→watch。三、Vue生命周期（31-40题）31、什么是Vue生命周期？Vue组件从创建、挂载、更新、销毁的完整过程，生命周期钩子是框架内置的回调函数，允许开发者在组件不同阶段执行自定义逻辑，比如初始化数据、请求接口、销毁定时器等。32、Vue2常用生命周期及执行顺序？创建阶段：beforeCreate、created挂载阶段：beforeMount、mounted更新阶段：beforeUpdate、updated销毁阶段：beforeDestroy、destroyed33、created和mounted的区别？created：组件创建完成，数据、方法已初始化，DOM未生成、未挂载到页面，无法操作DOM，可用于初始化数据、调用接口。mounted：组件DOM挂载完成，页面渲染完毕，可操作DOM、获取DOM节点、操作第三方DOM插件、开启定时器。34、beforeDestroy的作用？组件销毁前执行，核心作用是清理副作用：清除定时器、解绑全局事件、终止未完成的接口请求、移除监听事件，防止页面跳转后内存泄漏。35、Vue3生命周期的变化？1、销毁相关钩子更名：beforeDestroy→beforeUnmount，destroyed→unmounted；2、新增钩子：onRenderTriggered、onRenderTracked；3、组合式API中需要手动导入生命周期钩子，选项式API不变。36、页面刷新、路由跳转分别触发哪些生命周期？页面刷新：所有组件重新执行创建、挂载完整生命周期；路由跳转：离开的组件执行销毁生命周期，进入的组件执行创建、挂载生命周期。37、父子组件生命周期执行顺序？加载顺序：父beforeCreate→父created→父beforeMount→子beforeCreate→子created→子beforeMount→子mounted→父mounted更新顺序：父beforeUpdate→子beforeUpdate→子updated→父updated销毁顺序：父beforeDestroy→子beforeDestroy→子destroyed→父destroyed38、生命周期中可以操作数据吗？beforeCreate：无法操作data和methods；created及之后所有钩子：均可正常操作数据、调用方法。39、为什么不在created中操作DOM？created阶段只是初始化了数据和方法，组件模板还没有编译挂载，页面DOM节点不存在，获取不到DOM元素，也无法操作DOM，所有DOM操作必须写在mounted中。40、activated和deactivated钩子作用？配合keep-alive缓存组件使用。activated：缓存组件被重新激活时触发；deactivated：缓存组件失活、隐藏时触发。可用于缓存页面后，刷新页面数据、重置状态。四、组件通信（41-55题）41、Vue常用组件通信方式有哪些？1、父子通信：props、$emit、$parent/$children、provide/inject；2、兄弟通信：事件总线、Vuex/Pinia、父组件中转；3、跨级/全局通信：Vuex/Pinia、provide/inject、事件总线、全局变量。42、props传值的优缺点及注意事项？优点：简单直观、官方推荐、数据流向清晰；缺点：多层组件传值会产生props层层穿透问题。注意事项：props只读、需要校验类型和默认值、禁止直接修改props数据、复杂数据类型为引用类型。43、$emit父子传值原理？子组件通过$emit触发自定义事件，携带参数数据；父组件在引用子组件的标签上监听该自定义事件，接收子组件传递的数据，实现子传父。44、provide和inject的使用场景和优缺点？用于跨多层父子组件传值，祖先组件通过provide提供数据，任意后代组件通过inject注入数据，无需层层传参。优点：解决props穿透问题；缺点：数据响应式需要特殊处理，数据来源不清晰，全局滥用难以维护，适合主题、权限、全局配置等固定数据。45、Vue2事件总线（Bus）的原理和问题？原理：创建一个空Vue实例作为事件中心，通过$on监听事件、$emit触发事件，实现兄弟、跨级通信。问题：事件不会自动销毁，页面多次跳转后会重复绑定事件，导致多次触发逻辑，需要在beforeDestroy中手动移除事件监听。Vue3已移除事件总线，推荐使用mitt替代。46、$parent和$children的弊端？$parent获取父组件实例，$children获取子组件实例数组。弊端：$children返回的子组件顺序不固定，不稳定；直接操作组件实例数据，耦合度极高，不利于项目维护，业务中尽量少用。47、$attrs和$listeners的作用？$attrs：接收父组件传递的非props属性，用于多层组件透传属性；$listeners：接收父组件的自定义事件，用于多层组件透传事件，完美解决多层组件属性和事件穿透问题。Vue3移除$listeners，事件统一合并到$attrs中。48、Vue3mitt事件总线使用方式？1、安装mitt；2、新建独立event文件创建mitt实例；3、组件内on监听事件、emit触发事件、off移除事件；4、组件销毁时移除对应事件，避免内存泄漏。49、组件通信方式如何选型？简单父子传值：props/$emit；多层跨级静态数据：provide/inject；简单兄弟/临时跨组件通信：mitt事件总线；全局状态、复杂数据、多组件共享：Vuex/Pinia。50、props如何做类型校验？可以指定类型、默认值、是否必填、自定义校验规则。支持String、Number、Boolean、Array、Object、Function等基础类型，也支持自定义构造函数校验，非法传值会在控制台抛出警告，规范组件传参。51、props传引用类型数据，子组件修改会影响父组件吗？会。对象、数组属于引用类型，父子组件指向同一个内存地址。子组件修改内部属性，不会触发Vue报错，但会直接修改父组件数据源，造成数据污染，业务中绝对禁止这种写法。52、如何解决props数据修改污染问题？1、子组件通过解构、深拷贝复制一份props数据，修改副本；2、子组件修改数据通过$emit通知父组件，由父组件修改原数据；3、使用computed包裹props数据，通过setter触发更新。53、插槽属于组件通信吗？作用是什么？属于内容分发式组件通信。父组件向子组件传递HTML结构、模板内容，实现组件内容自定义，提升组件复用性。54、默认插槽、具名插槽、作用域插槽区别？默认插槽：通用内容分发，单个插槽，无需命名；具名插槽：多个插槽，通过name区分不同位置的内容；作用域插槽：子组件向父组件传递数据，父组件根据子组件数据渲染自定义模板，核心是子传父数据+内容分发。55、动态插槽怎么使用？通过v-slot:[变量名]动态绑定插槽名称，根据变量值切换不同插槽，适合封装高度灵活的通用组件（表格、弹窗）。五、Vue响应式原理（56-65题）56、Vue2响应式原理？核心是数据劫持+发布订阅模式。通过Object.defineProperty劫持data中数据的getter和setter，数据读取时收集依赖（Watcher），数据修改时触发订阅，通知视图更新。缺陷：无法监听对象新增、删除属性，无法监听数组下标修改、数组长度变更。57、Vue2如何解决响应式缺陷？提供内置API手动触发响应式：Vue.set/this.$set（新增对象属性、数组指定下标数据）、this.$delete（删除属性），同时重写了数组的7个变异方法（push、pop、shift、unshift、splice、sort、reverse），调用这些方法可触发视图更新。58、Vue3响应式原理？使用ES6Proxy代理整个数据对象，拦截对象的读取、修改、新增、删除、数组操作等所有行为，结合Reflect操作数据，完美解决Vue2的响应式缺陷，支持任意数据变更监听。59、Proxy和Object.defineProperty的区别？1、监听范围：defineProperty只能监听单个属性；Proxy监听整个对象所有属性。2、数据操作：Proxy支持监听新增、删除、数组下标、长度变化；defineProperty不支持。3、兼容性：defineProperty兼容低版本浏览器；Proxy不支持IE浏览器。4、功能：Proxy支持更多拦截器（has、deleteProperty等），功能更全面。60、什么是依赖收集、视图更新流程？依赖收集：页面渲染时，组件读取响应式数据，Vue会将当前渲染Watcher收集到Dep依赖池中，记录数据和视图的关联关系。视图更新：数据发生修改，触发setter拦截，Dep通知所有收集的Watcher，Watcher触发组件重新渲染，更新视图。61、Dep、Watcher、Observer的关系？Observer：遍历数据，为每个属性添加响应式劫持；Dep：每个响应式属性对应一个Dep，用于收集Watcher、分发更新通知；Watcher：组件渲染观察者，关联数据和视图，接收更新通知，触发视图重绘。62、为什么Vue数据更新是异步的？为了提升渲染性能。如果数据每次修改都立即更新视图，多次连续修改数据会触发多次DOM渲染，性能极差。Vue会将同步的数据修改操作缓存，等待所有同步代码执行完毕后，统一批量更新视图，只渲染一次DOM。63、nextTick的作用和原理？作用：获取更新后的最新DOM。数据修改后，DOM不会立即更新，nextTick回调会在DOM渲染完成后执行。原理：利用微任务优先级，将回调函数放入任务队列，等待主线程执行完毕、DOM更新完成后执行。64、Vue2数组响应式失效场景？1、通过数组下标直接修改值：arr[0]=123；2、直接修改数组长度：arr.length=0；3、对象动态新增、删除属性，未使用$set/$delete。65、ref和reactive的区别（Vue3）？1、适用数据：ref支持基本数据类型、引用类型；reactive只支持对象、数组引用类型。2、取值方式：ref数据需要通过.value访问；reactive直接访问属性。3、原理：ref底层对基本类型手动劫持，引用类型会自动转为reactive；reactive基于Proxy实现。4、使用场景：简单基础数据用ref，复杂对象、数组用reactive。六、虚拟DOM与Diff算法（66-75题）66、什么是虚拟DOM？虚拟DOM是对真实DOM的抽象描述，本质是一个JS对象，包含节点标签、属性、子节点等信息。Vue通过操作虚拟DOM替代直接操作真实DOM，减少昂贵的DOM操作，提升页面渲染性能。67、虚拟DOM的优缺点？优点：减少真实DOM操作、跨平台渲染（适配Web、小程序、APP）、差异化更新视图、提升渲染效率；缺点：首次渲染比原生DOM慢，需要生成虚拟DOM对象，极小页面场景优势不明显。68、Diff算法的作用？对比新旧虚拟DOM树的差异，只更新变化的DOM节点，而非全量重新渲染页面，最小化DOM操作，大幅提升更新性能。69、Vue2Diff算法原理？采用同层比较策略，只对比同一层级节点，不跨层级对比，降低复杂度。通过头尾双指针遍历新旧节点数组，优先处理头尾相同节点、复用节点，最后处理新增、删除、移动节点，结合key精准匹配节点。70、Diff算法的比较流程？1、判断节点类型：不同类型直接销毁旧节点、创建新节点；2、同类型节点：对比属性，更新差异属性；3、递归对比子节点，通过key匹配、复用、增删改节点。71、为什么index作为key会有问题？列表删除、插入数据时，数组index会重新排序，导致新旧节点key错乱，Diff算法错误复用节点，出现数据渲染错乱、表单残留、样式错位等问题，无法精准更新DOM。72、Vue3Diff算法优化点？1、新增最长递增子序列优化，减少节点移动次数，最大化复用节点；2、优化静态节点，跳过无需更新的静态DOM，提升对比速度；3、优化PatchFlags补丁标记，精准识别动态节点，只对比动态内容。73、什么是补丁标记PatchFlags？Vue3编译阶段对模板节点做标记，区分动态文本、动态属性、动态样式等。Diff过程中只对比带标记的动态节点，忽略静态节点，极大减少对比开销，提升diff效率。74、静态提升的作用？Vue3编译优化策略，将页面中不变的静态节点、静态属性提升到全局，只创建一次，后续渲染直接复用，无需重复创建虚拟DOM，减少内存占用和渲染开销。75、key的取值规范？优先使用后端返回的唯一ID、uuid；禁止使用index、随机数；随机数会导致每次渲染key不同，节点无法复用，造成全量重渲染，严重影响性能。七、VueRouter路由（76-85题）76、路由的hash和history模式区别？1、url展示：hash模式带#号，不美观；history模式无#，url简洁标准。2、兼容性：hash兼容所有浏览器；history兼容IE10+。3、刷新机制：hash刷新不会请求后端；history刷新会请求后端，需要后端配置重定向，否则404。4、原理：hash基于锚点切换，不会触发页面跳转；history基于H5historyAPI实现。77、路由跳转方式及区别？1、声明式导航：<router-linkto="">，自带路由缓存、避免刷新，推荐使用；2、编程式导航：$router.push/replace/go，灵活适配业务逻辑。push：追加历史记录，可返回上一页；replace：替换当前历史记录，无法返回；go：前进后退页面。78、路由传参的方式及区别？1、query传参：参数拼接在url后面，刷新不丢失，参数可见，适合公开参数；2、params传参：参数隐藏在路由对象中，刷新页面参数丢失，适合私密参数，需要配合路由动态参数配置。79、路由守卫有哪些？执行顺序？全局守卫：beforeEach（全局前置）、afterEach（全局后置）；路由独享守卫：beforeEnter；组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。执行顺序：全局前置守卫→路由独享守卫→组件内前置守卫→路由跳转→全局后置守卫。80、路由守卫的业务场景？1、全局前置守卫：登录权限判断、未登录拦截、页面标题统一设置；2、离开守卫：页面未保存提示、清空表单、终止请求；3、更新守卫：路由参数变化刷新页面数据。81、路由懒加载的原理和作用？原理：基于ES6import动态导入，路由跳转时才加载对应组件代码。作用：拆分打包文件，减少首屏打包体积，提升首屏加载速度，优化页面加载性能，避免一次性加载所有页面代码导致首屏卡顿。82、$route和$router的区别？$router：路由实例，包含路由跳转、替换、前进后退等方法，用于操作路由；$route：路由信息对象，包含当前页面path、query、params、meta等数据，用于获取路由信息。83、路由嵌套和路由重定向作用？路由嵌套：实现页面嵌套布局，适配后台系统侧边栏、顶部导航嵌套页面；路由重定向：默认跳转首页、修复失效路由、统一路由入口，避免空页面。84、keep-alive的作用和使用场景？作用：缓存组件实例，组件切换时不销毁，保留页面数据和状态，避免重复请求接口、重复渲染。场景：列表页、搜索页、表单页等需要保留用户操作状态的页面；详情页、弹窗等临时页面不建议缓存。85、路由刷新当前页面的解决方案？1、跳转空页面再返回原页面；2、通过key修改强制刷新组件；3、使用路由replace跳转当前路由；4、监听路由参数变化手动刷新数据。八、状态管理Vuex/Pinia（86-92题）86、Vuex的核心概念？五大核心：state（全局状态数据）、mutations（同步修改state）、actions（异步操作、提交mutations）、getters（状态计算属性）、modules（模块化拆分状态）。87、mutations和actions的区别？1、执行方式：mutations同步执行，actions异步执行；2、功能定位：mutations唯一修改state的入口；actions处理异步请求、复杂逻辑，不直接修改state；3、调用方式：mutations通过commit调用；actions通过dispatch调用。88、Vuex数据刷新丢失怎么解决？Vuex数据存在内存中，页面刷新会重置。解决方案：结合localStorage/sessionStorage持久化存储，页面初始化时读取本地数据回填Vuex。89、Vuex模块化的意义？大型项目中状态数据多，模块化可拆分不同业务模