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

Vue2高频面试题及详细答案（实战版）一、Vue基础核心题1.说说你对Vue的理解？Vue的核心特性有哪些？Vue是一套用于构建用户界面的渐进式JavaScript框架，专注于视图层开发，轻量、高效、易上手，既可以开发小型页面，也可以配合生态开发大型单页应用。核心特性：数据驱动视图：不用手动操作DOM，数据变化自动更新视图，大幅减少DOM操作代码组件化开发：页面拆分为独立、可复用的组件，便于代码维护和复用双向数据绑定：通过v-model实现表单数据和视图的双向同步虚拟DOM：提升DOM渲染和更新性能，减少真实DOM操作生命周期：组件从创建到销毁的完整流程，方便我们在对应阶段处理业务逻辑指令系统：内置v-for、v-if、v-show等指令，快速操作视图插件生态完善：搭配vue-router、vuex、axios可实现完整项目开发2.Vue单页应用（SPA）的优缺点？优点：页面跳转无刷新，用户体验更流畅前后端分离，前端专注视图，后端专注数据接口，开发效率更高组件复用性高，代码冗余少，项目维护更方便缺点：首屏加载速度慢，需要一次性加载核心JS、CSS文件SEO不友好，页面内容靠JS渲染，传统爬虫无法抓取动态内容页面复杂度高后，状态管理、路由逻辑会变得繁琐3.v-if和v-show的区别？实际项目如何选择？核心区别：渲染原理不同：v-if是真正的条件渲染，条件为false时，组件/元素不会渲染、不存在于DOM树中；v-show只是控制CSSdisplay属性，无论条件真假，DOM都会渲染，只是隐藏/显示。切换开销不同：v-if切换开销大，每次切换都会触发组件的销毁和重建；v-show切换开销小，仅修改样式。初始渲染开销不同：v-if初始条件为false时无渲染开销；v-show初始一定会渲染DOM，开销更大。使用场景：频繁切换显示隐藏的场景，用v-show（如弹窗、tab切换）页面加载后极少切换、权限控制、按需渲染场景，用v-if4.v-for为什么必须绑定key？key为什么不推荐用index？Vue渲染列表时会使用虚拟DOMdiff算法，key是元素的唯一标识，作用是帮助diff算法精准识别节点，避免列表更新时出现节点错乱、复用错误的问题，提升渲染性能。不推荐用index作为key的原因：如果对列表进行删除、插入、排序操作，数组索引会发生变化，导致key对应元素错乱。Vue会错误复用旧节点，引发数据渲染错位、表单数据残留、样式错乱等问题。最佳实践：使用后端返回的唯一id作为key。5.Vue中data为什么必须是函数？Vue组件是可以复用的公共模板，如果data是一个对象，所有组件实例会共享同一个对象引用，一个组件修改数据，其他复用组件的数据都会被污染。而data设为函数，每个组件实例都会独立调用函数，返回一个全新的对象，每个组件的数据相互独立，互不干扰。补充：根实例的data可以是对象，因为根实例只会创建一次，不存在复用问题。二、Vue生命周期高频题1.说说Vue2组件的生命周期及常用钩子？生命周期是组件从创建、挂载、更新、销毁的完整过程，Vue2核心分为8个钩子函数：创建阶段（组件创建，未挂载DOM）beforeCreate：实例刚创建，无法获取data、methods、DOM，基本不用created：实例创建完成，可获取data、methods，无法操作DOM。常用：页面初始化请求接口、初始化数据挂载阶段（渲染DOM）beforeMount：挂载前，模板已编译完成，即将渲染DOMmounted：DOM挂载完成，可操作DOM、获取$refs。常用：操作DOM、初始化第三方插件、请求页面数据更新阶段（数据更新触发视图更新）beforeUpdate：数据更新后，视图重新渲染前触发updated：视图更新完成后触发销毁阶段beforeDestroy：组件销毁前，实例仍可用。常用：清除定时器、解绑事件、取消接口请求，防止内存泄漏destroyed：组件销毁完成，DOM和实例全部清空2.created和mounted的区别？接口请求放哪个？created：组件创建完成，数据已初始化，没有DOM，执行速度更快mounted：DOM已渲染完成，可操作DOM，执行晚于created接口请求推荐放在created：可以更早获取数据，减少页面白屏等待时间；如果请求逻辑需要依赖DOM或第三方DOM插件，再放到mounted。3.组件销毁时需要做哪些操作？核心目的：防止内存泄漏清除定时器、延时器解绑自定义DOM事件、窗口监听事件（resize、scroll等）取消正在pending的axios请求清空全局事件总线的监听三、响应式原理核心题（Vue2重点）1.详细说说Vue2的响应式原理？Vue2是基于Object.defineProperty()实现的数据劫持响应式，核心流程分为三步：数据劫持：遍历data中的所有属性，通过defineProperty劫持属性的get、set方法依赖收集：页面渲染时会触发属性的get方法，此时收集当前组件的Watcher（视图更新观察者）派发更新：当数据被修改时，触发set方法，通知收集到的Watcher更新视图，实现数据驱动视图简单来说：数据读的时候收集依赖，数据改的时候更新视图。2.Vue2响应式的缺陷有哪些？这是面试高频重点，Vue2响应式存在两大缺陷，也是Vue3改用Proxy的核心原因：无法监听对象新增、删除属性：defineProperty只能劫持已存在的属性，后续新增/删除的属性不具备响应式无法监听数组下标修改、数组长度修改：直接通过索引修改数组项、修改数组length，视图不会更新解决方案：对象新增属性：使用this.$set或Vue.set删除对象属性：使用this.$delete数组修改：使用Vue重写的数组方法（push、pop、shift、unshift、splice、sort、reverse），或$set修改数组项3.$set的原理是什么？为什么能实现响应式？$set会手动给新增的属性添加get/set劫持，同时触发依赖收集和视图更新，让新增属性具备响应式能力。它可以规避defineProperty的缺陷，专门处理对象新增属性、数组索引修改的无响应式问题。4.watch和computed的区别？各自使用场景？核心区别：计算属性computed：依赖缓存，只有依赖数据变化才会重新计算，否则读取缓存值；是同步执行；用于简单数据计算、数据格式化。侦听器watch：无缓存，数据每次变化都会触发函数；支持异步；用于监听数据变化执行复杂逻辑（接口请求、复杂判断、多数据联动）。场景总结：数据拼接、过滤、计算、格式化→用computed数据变化后请求接口、执行异步操作、复杂业务逻辑→用watch补充：watch默认浅层监听，监听对象/数组需要开启deep:true，初始立即执行需要immediate:true。四、组件通信面试题（Vue2重中之重）1.Vue2常见的组件通信方式及适用场景？Vue2共6种常用通信方式，覆盖父子、兄弟、跨级、全局通信：1.父子组件通信父传子：props：父组件通过属性传值，子组件通过props接收，最常用子传父：$emit：子组件自定义事件，触发父组件绑定的方法传值父访问子：$refs/$children：$refs获取单个子组件实例，$children获取所有子组件数组（不推荐，顺序不稳定）子访问父：$parent：直接访问父组件实例（不推荐，耦合度高）2.兄弟/跨级组件通信事件总线Bus：创建空Vue实例作为事件中心，通过$on、$emit传值，适合小型项目跨组件通信provide/inject：祖辈组件provide提供数据，后代组件inject注入，适合深层嵌套组件传值，缺点是数据非响应式（可通过传对象实现响应）3.全局状态通信Vuex：全局状态管理，适合中大型项目，统一管理全局公共状态（登录态、菜单、全局配置等）2.props传值的特点？如何规范使用？特点：单向数据流，子组件不能直接修改props数据，否则会报错，导致数据状态混乱。规范使用：定义props时指定类型、默认值、校验规则，提升项目稳定性。示例：PlainText

props:{

name:{

type:String,

default:''

},

age:{

type:Number,

required:true

}

}3.provide和inject的优缺点？优点：无需层层传参，轻松实现深层嵌套组件传值，代码简洁缺点：默认数据非响应式，只有传递引用类型数据才会被动更新数据来源不清晰，多层嵌套后难以追溯数据来源，维护成本高适用场景：组件库开发、全局固定配置传参，业务项目优先用Vuex。五、Vuex核心面试题1.Vuex的核心概念及作用？Vuex是Vue专用的全局状态管理工具，解决多组件共享状态、跨组件通信混乱的问题，五大核心：State：仓库数据源，存储全局公共状态Mutations：唯一修改state的方式，同步执行，方便状态追踪调试Actions：处理异步操作、复杂逻辑，通过commit调用mutations修改stateGetters：类似于计算属性，对state数据进行二次处理、缓存数据Modules：模块拆分，将庞大的仓库拆分为多个子模块，避免state臃肿，实现模块化管理2.为什么修改state必须走mutations？不能直接改？核心原因：统一状态修改入口，便于调试和维护。Vuex官方设计规范中，mutations是唯一修改state的入口，所有状态变更都可以在Vue开发者工具中追踪记录。如果直接修改state，开发者工具无法捕捉状态变化，项目报错时难以定位问题，同时会导致状态管理混乱。补充：开发模式下直接改state会报错，生产模式不会，但依然不推荐。3.actions和mutations的区别？mutations：同步执行，只负责修改state，不处理异步逻辑actions：支持异步，负责接口请求、异步逻辑，不直接修改state，通过commit触发mutations六、Vue-Router面试题1.Vue2路由的两种模式？区别？Vue-Router提供hash和history两种模式：hash模式（默认）地址带#号，如http://xxx/#/home原理：监听hashchange事件，hash变化不会刷新页面，也不会请求后端优点：兼容性好，无需后端配置缺点：地址不美观，#号不符合常规网址规范history模式地址无#号，简洁美观原理：基于HTML5history.pushState、replaceState实现缺点：刷新页面会404，需要后端配置路由重定向，将所有请求指向index.html2.路由守卫有哪些？全局守卫执行顺序？常用路由守卫分为三类：全局守卫：beforeEach（全局前置守卫）、afterEach（全局后置守卫）路由独享守卫：beforeEnter（单个路由单独配置）组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave完整执行顺序：全局前置beforeEach→路由独享beforeEnter→组件内beforeRouteEnter→路由跳转→全局后置afterEach3.路由跳转$router和$route的区别？$router：路由实例对象，全局路由管理器，用于操作路由跳转（push、replace、go）$route：当前路由信息对象，用于获取路由参数（path、query、params、meta等）4.路由懒加载的作用和写法？作用：实现代码分割，路由组件按需加载，大幅减少首屏加载资源，优化首屏加载速度，解决项目打包后文件过大的问题。写法：PlainText

//懒加载写法

constHome=()=>import('@/views/Home.vue')

routes:[{path:'/home',component:Home}]七、Vue2性能优化实战题（项目高频）1.你在项目中做过哪些Vue性能优化？结合实际开发，从5个维度优化：1.渲染优化v-for必须加唯一key，避免用indexv-for和v-if不要连用，v-for优先级更高，会造成无效循环，可通过computed预处理数据频繁切换用v-show，按需渲染用v-if2.代码优化路由懒加载、组件异步加载，按需加载资源多用computed缓存计算结果，减少重复计算销毁组件时清除定时器、事件监听，防止内存泄漏3.打包优化开启gzip压缩，减小打包文件体积第三方库CDN引入，减少项目打包体积删除冗余依赖、无用代码，压缩图片资源4.体验优化接口请求防抖、节流，避免频繁请求长列表使用虚拟列表，只渲染可视区域DOM，避免DOM过多卡顿5.状态优化Vuex模块化拆分，避免状态臃肿合理使用缓存，避免重复请求相同数据2.v-for和v-if为什么不能连用？Vue2中