Vue高频面试题及实战答案.docx

Vue高频面试题及实战答案

一、基础概念题

问：Vue2和Vue3的响应式原理有什么区别？实际开发中会遇到哪些响应式失效的情况？

答：Vue2用Object.defineProperty劫持对象属性的get/set，但只能监听已有属性，数组通过重写7种变异方法（push/pop等）实现响应式。Vue3用Proxy直接代理整个对象，能监听新增属性、数组索引变化，还支持Map/Set等数据结构。

常见失效场景：Vue2中给对象新增属性（如this.obj.newKey=1）、修改数组索引（如this.arr[0]=2）；Vue3中若用ref包裹基本类型，直接改ref.value不会失效，但如果解构const{val}=toRefs(state)后改val，需确保state是响应式对象。

问：Vue的生命周期钩子，在实际项目中哪些钩子用得最多？分别做什么事？

答：常用的有3个阶段：

created：实例创建完，能访问data和methods，但DOM没渲染，适合做初始化请求（比如获取列表数据）、初始化变量；

mounted：DOM渲染完成，能操作DOM（比如初始化第三方插件，如Echarts、地图），但要注意如果是子组件，父组件mounted比子组件晚执行；

beforeUnmount（Vue3）/beforeDestroy（Vue2）：组件销毁前，用来清理定时器、解绑事件监听（比如window.removeEventListener）、取消未完成的请求，避免内存泄漏。

二、组件通信题

问：父子组件、跨层级组件、兄弟组件分别用什么方式通信？说下实际项目中的选择逻辑？

答：按场景选最简洁的方式：

父子组件：首选props+emit（父传子用props，子传父用emit触发父事件），比如父组件给子组件传“列表数据”，子组件点击项后用emit通知父组件“选中项变化”；如果需要父调子方法，用ref（父组件this.$refs.childRef.method()）。

跨层级（爷孙/深层）：用provide+inject（比如项目中全局配置、主题色），但要注意它是非响应式的，需用ref/reactive包裹数据才会响应；大型项目用Pinia（比Vuex轻量，不用分modules）。

兄弟组件：简单场景用“父组件中转”（Aemit给父，父再传props给B）；复杂场景用Pinia，比如两个兄弟组件共享“购物车数量”。

三、进阶特性题

问：v-if和v-for为什么不建议一起用？实际开发中怎么避免这个问题？

答：因为Vue2中v-for优先级比v-if高，会先循环所有元素再判断是否显示，比如v-for=iteminlistv-if=item.show，即使90%的item不显示，也会先循环100%的元素，浪费性能。Vue3中优先级反过来，但依然不推荐，逻辑不清晰。

解决办法：用template包裹，先过滤数据再循环，比如：

templatev-for=iteminfilteredList:key=item.id

divv-if=item.show{{item.name}}/div

/template

//computed里过滤：filteredList(){returnthis.list.filter(item=item.show)}

问：computed和watch的区别？分别在什么场景下用？

答：核心区别是“主动计算”和“被动监听”：

computed：依赖其他响应式数据，有缓存（依赖不变时不会重新计算），适合“根据多个值计算出一个结果”的场景，比如“购物车总价=所有商品单价×数量之和”、“搜索列表=原列表过滤关键词”。

watch：监听单个响应式数据，无缓存，适合“数据变化后做异步操作或复杂逻辑”的场景，比如“监听路由参数变化，重新请求详情接口”、“监听输入框内容变化，300ms后做防抖搜索”。

注意：watch要避免深度监听（deep:true）复杂对象，会影响性能，建议只监听需要的属性（如watch:{obj.key:()={}}）。

四、性能优化题

问：Vue项目中常用的性能优化手段有哪些？说2-3个你实际用过的？

答：从“渲染”和“加载”两个维度优化：

减少不必要的渲染：用v-memo缓存DOM（比如列表渲染时，数据没变化就不重新渲染，v-memo=[item.id,item.name]）；用keep-alive缓存组件（比如标签页切换，避免重复创建销毁组件，include=Tab1,Tab2指