2025年前端vue面试题,附答案.docxVIP

2025年前端vue面试题,附答案

Vue3响应式系统中，reactive与ref的核心差异是什么？何时选择使用ref？

reactive通过Proxy对对象进行深层响应式代理，适用于复杂对象或数组；ref基于Object.defineProperty（Vue3中实际为闭包+getter/setter）封装基础类型或对象，通过.value访问值。差异体现在：1.对基础类型的处理，reactive无法直接代理number/string，需包裹对象；2.解构丢失响应性，reactive解构后属性不再响应，ref在模板中自动解包；3.类型推断，ref需显式声明类型（如refnumber(0)）。选择ref的场景：基础类型状态、需要单独响应式变量（如表单输入值）、需在模板中直接使用（无需.value）。

Vue3组合式API中，setup的执行时机与限制有哪些？

setup在组件实例初始化（beforeCreate之后，created之前）时执行，此时组件实例尚未完全创建，无法访问this。限制包括：1.同步返回对象（模板中使用的属性/方法）或函数（作为渲染函数）；2.无法使用组件选项（如data/computed）中定义的属性，因这些在setup后初始化；3.异步操作需在setup内通过async/await处理，但需注意返回值为Promise时需配合Suspense（实验性）。

自定义v-model在Vue3中有哪些改进？如何实现支持多个v-model绑定的组件？

Vue3中v-model默认绑定props的modelValue和事件update:modelValue，相比Vue2的value和input事件更灵活。改进包括：1.支持参数（v-model:title），对应props的title和事件update:title；2.支持修饰符（如v-model.trim），通过在自定义组件中处理事件参数实现。实现多v-model绑定：为每个绑定定义独立的prop和update事件，例如组件接收title和content两个prop，触发update:title和update:content事件，模板中使用v-model:title和v-model:content绑定。

Vue3的Suspense组件的设计目标是什么？其与异步组件的集成方式是怎样的？

Suspense用于管理异步依赖的加载状态，目标是简化组件树中多个异步操作（如异步组件、异步setup、异步Composables）的加载状态管理。集成方式：异步组件通过defineAsyncComponent包裹，或在setup中返回Promise（需配合Suspense）。Suspense有两个插槽：default（加载完成内容）和fallback（加载中/错误内容）。当default插槽中的组件或逻辑触发异步操作时，Suspense会显示fallback，直到所有异步依赖解决。注意：Suspense目前在Vue3中为实验性特性，需通过app.config.experimentalSuspense=true启用。

Pinia相比Vuex的核心优势有哪些？如何在Pinia中实现状态的持久化？

优势：1.无modules嵌套，通过defineStore定义独立store，更灵活；2.无需mutation（仅actions），直接修改state（配合storeToRefs保持响应性）；3.类型安全（基于TypeScript，自动推导state/actions类型）；4.更小的体积（无复杂的辅助函数）；5.更好的Tree-shaking支持。状态持久化实现：通过Pinia的插件机制，在store的$subscribe钩子中监听state变化，将state存储到localStorage/sessionStorage。示例：创建插件函数，在store初始化时从存储读取state，每次state变化时写入存储。

Vue3的虚拟DOMdiff算法做了哪些优化？PatchFlag的作用是什么？

优化点：1.静态提升（StaticHoisting）：将不变的节点提升到渲染函数外，避免重复创建；2.Block树：将动态节点按层级分组（Block），仅diffBlock内的动态节点；3.缓存事件处理函数（EventCache）：避免因闭包导致的事件处理器重复创建。PatchFlag是用于标记动态节点类型的位掩码（如TEXT=1,CLASS=2,STYLE=4等），在diff时仅检查标记的属性/内容，减少比较开销。例如，一个仅文本变化的节点会被标记为TEXT，diff时只对比文本内容。

如何在Vue组件中优化大量列表渲染的性能？v-mem