Vue2 高频面试题及详细答案（实战口语版）

Vue2高频面试题及详细答案（实战口语版）一、Vue基础核心题1、说说你对Vue的理解？Vue的核心特点是什么？Vue是一套轻量级、渐进式的前端MVVM框架，专注于视图层开发，上手简单、生态完善，适合单页应用和中小型项目开发。核心特点主要有这几点：数据双向绑定：数据变视图自动更新，视图改数据自动同步，不用手动操作DOM组件化开发：页面拆分成独立、可复用的组件，代码复用性高、维护方便虚拟DOM+diff算法：减少真实DOM操作，提升页面渲染性能指令系统：内置v-for、v-if、v-model等指令，快速操作视图路由、状态管理：搭配vue-router、vuex可快速开发大型单页应用2、MVVM原理是什么？和MVC有什么区别？MVVM分为三层：M（Model数据层）、V（View视图层）、VM（ViewModel视图模型层）。核心逻辑：ViewModel作为中间层，监听数据变化更新视图，监听视图操作同步数据，视图和数据完全解耦，开发者只需操作数据，不用操作DOM。和MVC的区别：MVC中Controller负责控制视图和数据，视图和控制器耦合度高，需要手动操作DOMMVVM没有手动DOM操作，双向绑定自动同步，更适合前端视图频繁更新的场景3、v-if和v-for优先级谁更高？为什么不建议一起使用？Vue2中v-for优先级高于v-if。不建议一起使用的原因：v-for会先循环渲染所有列表项，再根据v-if条件筛选隐藏，哪怕页面只需要展示少量数据，也会完整遍历一次，造成严重的性能浪费。正确优化方案：外层用template标签包裹v-if，内层写v-for，先判断条件再循环优先在数据层提前过滤，处理好数组数据再渲染，避免视图层判断4、v-show和v-if的区别？实际项目怎么选择？1、渲染原理不同v-if是真正的条件渲染：条件为false时，DOM元素直接销毁，不渲染；条件为true时，重新创建DOM、触发组件生命周期。v-show只是样式切换：不管条件真假，DOM都会渲染，只是通过控制display:none控制显示隐藏。2、性能消耗不同v-if切换开销大，频繁显示隐藏会重复创建销毁DOM；v-show切换开销小，只改样式。3、使用场景频繁切换显示隐藏（弹窗、下拉框）：用v-show页面加载后极少变动、权限控制、首次渲染隐藏：用v-if5、Vue中key的作用是什么？为什么不建议用index作为key？key是虚拟DOMdiff算法的唯一标识，作用是精准区分新旧节点，复用DOM、减少不必要的渲染，提升列表更新性能。不建议用index做key的核心原因：数组进行删除、插入、排序操作时，数组索引会重新排列，导致key错乱。diff算法无法正确复用原有DOM，会强制更新所有列表项，不仅降低性能，还会导致表单输入、选中状态错乱。最佳实践：使用后端返回的唯一id作为key。二、响应式原理核心题（Vue2重点）1、Vue2响应式原理是什么？简单说一下核心流程Vue2核心响应式原理是Object.defineProperty()数据劫持，结合发布订阅模式实现。完整流程：初始化组件时，遍历data中的所有属性，通过defineProperty为每个属性设置get、set方法，劫持数据的读取和修改页面渲染时，读取data数据，触发get方法，收集当前组件的Watcher（依赖收集）当数据被修改时，触发set方法，通知对应的Watcher更新视图（派发更新）2、Vue2响应式有什么缺陷？为什么对象新增属性、数组下标修改不更新视图？这是Vue2最经典的响应式缺陷：初始化时未定义的属性，无法劫持，不具备响应式。原因：Vue2只会在组件初始化时，遍历data已有属性做劫持，后续新增的对象属性、直接通过下标修改数组项，不会触发set方法，所以视图不更新。具体场景：对象新增、删除属性数组通过下标修改元素、修改数组长度解决方案：对象新增属性：使用this.$set(obj,key,value)删除对象属性：使用this.$delete(obj,key)数组修改：使用数组变异方法（push、splice、pop等）或$set3、Vue2数组响应式是怎么处理的？变异方法和非变异方法区别？Vue2无法通过defineProperty劫持数组下标变化，所以重写了数组的7个变异方法，在方法内部触发视图更新。变异方法（会更新视图）：push、pop、shift、unshift、splice、sort、reverse非变异方法（不会更新视图）：filter、map、slice、concat，这些方法会返回新数组，不会修改原数组处理方式：使用非变异方法时，直接替换原数组即可触发更新，比如this.arr=this.arr.filter(...)。4、$set的原理是什么？$set核心作用就是给新增属性手动添加响应式，并触发视图更新。执行逻辑：判断目标是否为数组，如果是数组，直接调用splice变异方法更新如果是对象，判断属性是否存在、是否在原型上，不存在则通过defineProperty劫持新属性手动触发依赖更新，通知视图渲染三、生命周期与组件通信1、Vue2组件生命周期有哪些？常用钩子和使用场景Vue2生命周期分为四大阶段，8个钩子：创建阶段beforeCreate：实例刚创建，无法获取data、dom，基本不用created：实例创建完成，可获取、修改数据，常用：发起首次接口请求、初始化数据挂载阶段beforeMount：挂载前，模板编译完成，未生成真实DOMmounted：DOM挂载完成，常用：操作DOM、初始化定时器、监听DOM事件更新阶段beforeUpdate：数据更新前，旧DOM未更新updated：数据更新完成，新DOM渲染完毕销毁阶段beforeDestroy：实例销毁前，组件还可用，常用：清除定时器、解绑事件、取消接口请求destroyed：实例销毁完成，组件所有功能失效2、created和mounted区别？接口请求放哪个？created在DOM挂载前执行，无法操作DOM；mounted在DOM挂载后执行，可以操作DOM。接口请求优先放在created：可以更早获取数据，减少页面白屏时间，提升用户体验。只有需要依赖DOM完成的请求，才放在mounted。3、Vue2组件通信方式有哪些？分别适用场景Vue2常用6种组件通信方式，覆盖所有场景：父子传值：props/$emit（最常用）

父传子用props，子传父用$emit触发自定义事件，适合普通父子组件通信子父直接访问：$parent/$children/ref

ref获取子组件实例，$parent获取父实例，适合简单快速取值，不适合多层嵌套跨级通信：provide/inject

祖先组件提供数据，后代任意层级注入，适合全局通用数据（主题、权限）兄弟/跨级通信：事件总线eventBus

newVue()作为事件中心，$on监听、$emit触发，适合小型项目简单跨组件通信全局状态管理：Vuex

统一管理全局数据，适合中大型项目、多组件共享数据（用户信息、购物车、全局状态）$attrs/$listeners

批量传递父组件属性和事件，适合多级组件透传参数，不用逐层手动传递四、Vuex与Vue-Router1、Vuex核心属性有哪些？各自作用Vuex核心五要素：state：全局数据源，存放所有共享状态mutations：唯一修改state的方式，同步方法，用于修改数据actions：异步方法，不直接修改state，通过调用mutations修改数据，用于处理接口请求、异步操作getters：state的计算属性，对数据过滤、加工，复用计算逻辑modules：模块化拆分，解决state数据臃肿、命名冲突问题，拆分多个模块管理状态2、为什么mutations必须是同步？actions必须是异步？Vuex核心设计是状态可追踪，方便调试。如果mutations写异步，开发者工具无法精准追踪数据变化的时机和流程，无法定位bug。所以规定mutations只能同步修改数据。所有异步操作（接口、定时器）统一放在actions，actions处理完异步逻辑后，再提交mutations修改数据，保证数据流转清晰可控。3、路由跳转方式？$route和$router区别路由跳转两种方式：声明式导航：<router-linkto="xxx">编程式导航：this.$router.push()、replace()、go()区别：$router：路由实例对象，包含路由跳转、配置、全局方法，用来操作路由$route：当前路由信息对象，包含当前页面的path、params、query、meta等，用来获取路由参数4、路由传参params和query区别？刷新丢失怎么解决？query传参：参数拼接在url地址栏，刷新不丢失，类似get请求，参数公开params传参：参数隐式传递，地址栏不显示，刷新页面参数会丢失，类似post请求params刷新丢失解决方案：路由配置中提前声明params参数关键参数存在sessionStorage/localStorage中，页面刷新重新读取5、路由守卫有哪些？项目中怎么用？常用路由守卫分为全局、独享、组件内三种：全局前置守卫beforeEach：最常用，全局拦截所有路由跳转，做登录权限判断、页面权限控制全局后置守卫afterEach：跳转后执行，多用于关闭loading、统计页面访问路由独享守卫beforeEnter：单个路由单独设置权限组件内守卫beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave：组件级权限、离开页面确认提示五、虚拟DOM与Diff算法（面试高频）1、什么是虚拟DOM？为什么要用虚拟DOM？虚拟DOM是对真实DOM的JS对象描述，用简单的对象结构记录节点标签、属性、子节点，是真实DOM的映射。使用原因：真实DOM操作开销极大，频繁增删改查会造成页面卡顿虚拟DOM先在内存中对比新旧节点差异（diff），只更新变化的DOM部分，最小化DOM操作，大幅提升性能跨平台适配，可适配网页、小程序、移动端等多端渲染2、Vue2Diff算法原理？diff比对流程Vue2diff是同层比较，只会对比同一层级的节点，不会跨层级对比，降低算法复杂度。核心比对流程：先判断节点类型：不同类型直接销毁旧节点，创建新节点同类型节点：对比属性，更新差异属性，再递归对比子节点子节点列表比对（核心）：通过key精准匹配，优先复用节点，只更新新增、删除、移动的节点diff算法的核心目的：尽可能复用原有DOM节点，减少渲染开销。六、项目实战踩坑与优化题1、Vue页面卡顿、性能优化方案有哪些？分为编码优化、加载优化、渲染优化三个维度：1、编码层面避免v-for和v-if混用，列表提前过滤数据长列表使用虚拟滚动，只渲染可视区域DOM合理使用computed缓存计算结果，减少重复计算销毁页面时清除定时器、解绑事件、取消pending状态的接口2、加载优化路由懒加载、组件懒加载，拆分代码包，减小首屏加载体积图片懒加载、静态资源压缩、CDN加速3、渲染优化频繁切换用v-show，少量条件渲染用v-if避免不必要的响应式数据，静态数据冻结Object.freeze合理使用key，提升diff效率2、computed和watch区别？各自使用场景computed计算属性依赖缓存，依赖值不变就不会重复计算同步执行，不支持异步适合数据计算、过滤、拼接场景（总价计算、列表筛选）watch侦听器无缓存，数据变化就触发支持异步操作适合数据变化后执行异步操作、复杂逻辑（输入框防抖、数据变化请求接口）3、Vue防抖节流怎么实现？项目哪里用过？防抖：触发事件后延迟执行，多次触发重置延迟，适合输入框搜索、窗口大小调整节流：固定时间内只执行一次，适合滚动加载、按钮频繁点击、resize项目中一般封装公共防抖节流函数，在搜索框、提交按钮、滚动加载场景使用，防止频繁请求接口、重复提交表单。4、Vue首次加载白屏怎么优化？开启路由懒加载，拆分js代码包，减小首屏资源体积引入loading加载动画、骨架屏，提升用户体验压缩打包资源、去除冗余代码、开启gzip压缩核心资源优先加载，非核心资源延迟加载七、高频冷门面试坑点1、nextTick作用是什么？原理？Vue中数据更新是异步的，修改数据后，DOM不会立刻更新，而是等待同一事件循环的所有数据修改完成后，统一更新DOM，提升渲染性能。nextTick的作用就是：等待DOM更新完成后再执行回调函数，