Vue面试题大全及答案.docxVIP

Vue面试题大全及答案

一、Vue基础概念

Vue响应式原理是什么？Vue2和Vue3有什么区别？

答案：Vue的响应式是指数据变化时视图自动更新。

Vue2用Object.defineProperty劫持对象属性的get/set，但有局限：无法监听数组索引修改、对象新增属性；

Vue3改用ES6Proxy代理整个对象，能监听数组变化、对象新增/删除属性，还支持Map/Set等数据结构；

实际开发注意：Vue2中数组需用this.$set或数组方法（push/splice）触发更新，Vue3无此问题。

v-model是怎么实现的？Vue2和Vue3的v-model有差异吗？

答案：v-model是语法糖，本质是v-bind:value+v-on:input。

Vue2中：组件用v-model时，默认接收valueprops，触发input事件；若想自定义，需用model选项（如model:{prop:num,event:change}）；

Vue3中：取消model选项，直接通过v-model:自定义属性绑定（如子组件defineProps([count])，父组件v-model:count=num），支持多v-model绑定；

例子：自定义输入框组件，Vue3可写为MyInputv-model:value=msgv-model:disabled=isDisabled/。

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

答案：

computed：依赖响应式数据，有缓存（依赖不变则不重新计算），只能同步计算，适合“根据已有数据生成新数据”（如购物车总价计算computed:{total(){returnthis.goods.reduce((sum,item)=sum+item.price,0)}}）；

watch：监听数据变化，无缓存，支持异步操作，适合“数据变化后执行副作用”（如监听用户ID变化，请求用户信息：watch:{userId(newVal){this.fetchUserInfo(newVal)}}）；

注意：computed不能直接修改，watch可通过immediate:true实现初始执行。

二、Vue组件核心

组件间通信有哪些方式？分别适合什么场景？

答案：

父传子：props（适合简单数据，如Child:name=username/）；

子传父：$emit（适合子组件触发父组件事件，如子组件this.$emit(change,newVal)，父组件Child@change=handleChange/）；

兄弟组件：EventBus（Vue2用newVue()，Vue3用mitt库，适合小型项目）、Pinia/Vuex（大型项目）；

深层组件：provide/inject（适合跨层级传递（如主题、权限），父组件provide(theme,dark)，子组件inject(theme)，注意不推荐用于频繁变化的数据）；

任意组件：Pinia/Vuex（统一管理状态，如用户信息、购物车）。

组件复用的方式有哪些？混入（mixin）和组合式API（CompositionAPI）的区别？

答案：复用方式：混入（mixin）、组合式API、自定义hooks。

混入（mixin）缺点：命名冲突（多个mixin有相同方法会覆盖）、数据来源不明确（难以追溯数据来自哪个mixin）、不支持TypeScript；

组合式API优点：通过函数封装逻辑（如useRequest、useCart），数据来源清晰，支持TypeScript，可灵活组合（如在setup中调用多个自定义hooks）；

例子：封装请求逻辑，用自定义hooksfunctionuseFetch(url){constdata=ref(null);constload=async()={data.value=awaitaxios.get(url)};return{data,load}}，组件中直接调用。

v-for为什么要加key？key的作用是什么？

答案：key是虚拟DOM的唯一标识，用于Vue的diff算法对比节点。

不加key：Vue会用“就地复用”策略，可能导致DOM更新错误（如列表勾选框错位）；

加key：diff时通过key快速找到相同节点，只更新变化的节点，提高性能，避免错误；

注意：key不能用index（若列表有删除/排序操作，index会变化，导致key失效），推荐