Vue 前端高频面试题（真实面试版+通俗答案）

Vue前端高频面试题（真实面试版+通俗答案）一、Vue基础高频题1、说说Vue2和Vue3的核心区别？答案：不用讲虚的，日常开发最直观的区别就这几点：1.响应式原理不同：Vue2用Object.defineProperty，只能监听已有属性，新增、删除属性、数组下标修改监听不到；Vue3用Proxy，直接劫持整个对象，能监听新增、删除、数组所有操作，更全面。2.API风格：Vue2是Options选项式API，代码分散（data、methods、watch分开写）；Vue3支持组合式API，相关逻辑可以收拢到一起，复杂项目更好维护。3.生命周期：Vue3移除了beforeCreate、created，用setup替代；部分钩子改名，比如destroyed变成unmounted。4.性能&体积：Vue3做了编译优化，静态节点不重复渲染，打包体积更小、运行更快，首屏和更新性能更好。5.TS支持：Vue3源码用TS重写，天然适配类型校验，Vue2需要额外配置，支持很差。2、Vue响应式原理到底是什么？简单说人话答案：核心就是：数据变了视图自动更，视图改了数据自动变。Vue2原理：通过Object.defineProperty给数据添加get/set拦截，页面渲染时触发get收集依赖，数据修改时触发set更新视图。Vue3原理：通过Proxy代理整个对象，拦截读写、删除、新增属性等所有操作，配合track收集依赖、trigger触发更新。补充：为什么有时候数据改了页面不更新？Vue2响应式有缺陷，新增属性、删除属性、数组下标/长度修改，不会触发set，所以视图不更新。3、v-if和v-for优先级谁高？为什么不建议一起用？答案：Vue2中v-for优先级更高，Vue3中v-if优先级更高。不建议一起用的原因：Vue2：先循环渲染所有列表，再判断v-if隐藏元素，多余做了很多无效循环，性能极差。Vue3：先判断条件再循环，看似没问题，但逻辑不合理，条件为false时直接不循环，容易出现列表不渲染的隐性bug。正确做法：外层用template包裹，v-if在外，v-for在内，或者直接在计算属性里先过滤数据再渲染。4、key的作用是什么？能不能用index当key？答案：key是虚拟DOM的唯一标识，作用是帮助diff算法精准对比新旧节点，减少不必要的DOM复用和更新，提升渲染性能。不建议用index当key：如果列表有删除、插入、排序操作，数组下标会变，导致key错乱。Vue会错误复用旧DOM，出现数据渲染错乱、表单值残留、高亮不对等问题。最优解：用后端返回的唯一ID当key，实在没有再临时用index。5、Vue双向绑定原理？v-model本质是什么？答案：双向绑定本质就是：数据绑定+事件监听。v-model是语法糖：原生输入框：:value绑定数据，@input监听输入事件修改数据。自定义组件：Vue2是value属性+input事件；Vue3统一改成modelValue+update:modelValue事件，支持多个v-model。二、Vue核心原理面试题1、说说虚拟DOM和diff算法流程答案：虚拟DOM就是用JS对象模拟真实DOM结构，操作JS成本远低于操作真实DOM，提升页面性能。diff算法核心是同层对比，不跨层级比较，流程很简单：1.先对比新旧节点根标签，标签不一样直接销毁重建；2.标签一样，对比属性，更新差异属性；3.对子节点进行对比，通过key精准匹配，执行新增、删除、移动、更新操作；4.最后统一更新真实DOM，减少重排重绘。2、Vue组件生命周期？常用钩子场景答案：不用全背，记住常用场景即可，面试够用：1.onBeforeMount/onMounted：挂载前后，mounted里面发接口请求、操作DOM、初始化定时器。2.onBeforeUpdate/onUpdated：数据更新前后，可监听数据变化后的DOM状态。3.onBeforeUnmount/onUnmounted：卸载前后，unmounted清空定时器、取消监听、解绑事件，防止内存泄漏。4.onActivated/onDeactivated：配合keep-alive缓存组件使用，组件激活/失活触发。3、watch和computed的区别？项目里怎么选？答案：1.计算属性computed：依赖缓存，只有依赖数据变了才重新计算；必须有返回值；适合简单数据计算、筛选、拼接；同步执行，不能写异步。2.监听watch：无缓存，数据每次变都触发；无返回值；适合数据变化后执行异步操作、复杂逻辑、多数据联动；支持异步。选型原则：能⽤computed就不用watch，简单计算用computed，异步、复杂操作用watch。4、Vue组件传值方式有哪些？全一点答案：日常项目常用的6种方式：1.父子传值：父传子props，子传父$emit2.祖孙/多级传值：provide/inject，跨层级直接传，不用层层透传3.兄弟/任意组件传值：全局事件总线（Vue2$bus，Vue3用mitt）4.全局状态管理：Vuex/Pinia，适合全局共享数据（登录态、配置、列表数据）5.$parent/$children/$refs：直接操作组件实例，不推荐，耦合度太高6.本地存储：localStorage/sessionStorage，非响应式，适合静态数据三、Vue3专项高频面试题1、setup函数执行时机？有什么特点？答案：setup在组件创建之前执行，早于beforeCreate、created。特点：1.函数内部没有this，所有数据、方法都需要手动return出去；2.不能使用Vue2的选项式API钩子、data、methods；3.专门用来写组合式逻辑，抽离复用代码，替代mixin。2、ref和reactive的区别？怎么选择？答案：1.ref：支持基本数据类型（字符串、数字、布尔）和对象；数据需要.value访问；模板中自动解包，不用写.value。2.reactive：只支持引用类型（对象、数组）；不用.value；不支持基本类型。选型：简单数据、基本类型用ref，复杂对象、表单对象、列表对象用reactive。3、setup语法糖（<scriptsetup>）的好处答案：1.代码更简洁，不用手动return变量和方法；2.组件、引入的资源可以直接使用，不用注册；3.编译速度更快，性能更好；4.天然支持TS，类型推导更友好，现在项目基本都用这个语法糖。4、Pinia相比Vuex的优势？答案：1.去掉了繁琐的mutations，直接修改数据，代码更简洁；2.天然支持TS，类型提示完善；3.模块扁平化，不用嵌套modules，直接引入对应模块即可；4.支持按需引入，打包体积更小；5.没有this指向问题，组合式写法更贴合Vue3语法。四、工程实战&坑点面试题（面试官超爱问）1、Vue页面刷新后数据丢失怎么解决？答案：因为Vuex/Pinia数据存在内存里，页面刷新内存清空，数据就没了。解决方式：1.核心数据（登录态、用户信息）持久化到localStorage/sessionStorage；2.页面初始化时，从本地存储取数据回填到状态管理中；3.也可以用vuex-persistedstate插件自动持久化。2、Vue性能优化你项目里做过哪些？答案：说实操的，别背理论1.渲染优化：列表用唯一key、v-if/v-for规范使用、频繁更新的组件用v-once静态渲染；2.缓存优化：路由页面用keep-alive缓存，避免重复请求和渲染；3.请求优化：接口请求放在onMounted，组件销毁取消请求，防止内存泄漏和冗余请求；4.打包优化：路由懒加载、组件按需引入、UI库按需导入、压缩打包资源；5.事件优化：高频事件（滚动、输入）做防抖节流；6.数据优化：复杂计算用computed，避免模板内写复杂表达式。3、路由守卫用过吗？全局守卫怎么做权限控制？答案：常用全局前置守卫beforeEach，核心做两件事：登录校验+权限控制1.判断有没有token，没有就跳登录页；2.有token再判断是否有用户权限，根据角色动态添加路由；3.无权限页面拦截跳转404，防止非法访问。4、Vue内存泄漏场景及解决方式答案：常见场景：定时器、全局事件监听、DOM事件绑定、未取消的接口请求、递归组件。解决：组件卸载onUnmounted中清空定时器、移除监听、取消请求、解绑事件。五、手写简答（初级必问）1、简述组件复用方式：mixin和自定义hooks区别答