Vue Router 的 afterEach 钩子适合做什么，为什么它不能中断导航？
围绕“Vue Router 的 afterEach 钩子适合做什么，为什么它不能中断导航”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 afterEach 在导航确认后触发、没有 next 回调因而只能做副作用（埋点、设置标题、滚动处理）。
核心关键词Vue Router afterEach 全局后置钩子 埋点 页面标题
面试知识索引 · 分类、标签与搜索
Vue · 性能优化面试题，46 道完整答案
Vue · 性能优化面试题第 1 页，显示第 1–46 题，共找到 46 道完整解析，可继续按分类、标签与关键词缩小范围。
46筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
首屏优化时，什么情况下应该用 Vue 异步组件延迟加载，什么情况下反而该保留同步引入？
围绕“首屏优化时，什么情况下应该用 Vue 异步组件延迟加载，什么情况下反而该保留同步引入”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确低频或折叠线以下组件适合异步、首屏关键路径组件异步反而增加请求瀑布的判断。
核心关键词Vue 异步组件 首屏优化 按需加载 取舍 - 0003
Vue 的 defineAsyncComponent 如何配置加载中与加载失败状态，delay 和 timeout 各解决什么问题？
围绕“Vue 的 defineAsyncComponent 如何配置加载中与加载失败状态，delay 和 timeout ”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 delay 避免快速加载时的 loading 闪烁、timeout 判定超时失败，及 loading/error 组件的配合。
核心关键词Vue defineAsyncComponent loadingComponent errorComponent delay timeout - 0004
Vue 异步组件因网络波动加载失败后，如何实现自动重试？
围绕“Vue 异步组件因网络波动加载失败后，如何实现自动重试”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确官方建议的做法是给 loader 包装带重试与失败兜底的 Promise 逻辑，并说明动态 import 缓存对重试的影响。
核心关键词Vue 异步组件 加载失败 重试 defineAsyncComponent loader - 0005
如何用 Vue Router 的组件内守卫实现表单未保存时离开页面的二次确认？
围绕“如何用 Vue Router 的组件内守卫实现表单未保存时离开页面的二次确认”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确用 beforeRouteLeave（或组合式 onBeforeRouteLeave）拦截并弹确认，结合脏状态标记决定是否放行。
核心关键词Vue Router beforeRouteLeave 表单未保存 离开确认 - 0006
Vue 组合式函数怎样同时接收普通值、ref 和 getter 并保持追踪？
解释 MaybeRefOrGetter 与 toValue 的输入约定，说明为什么必须在 computed 或 watchEffect 内归一化读取，以及普通值快照、props getter 和函数值歧义。
核心关键词Vue 组合式函数 ref getter toValue 参数追踪 - 0007
Vue 组合式函数封装异步请求时，如何设计 loading、error、data 和竞态保护？
按请求身份设计异步状态，说明参数更新、错误重置、取消与过期结果保护，给出可注入加载器的实现，并区分首屏 SSR 数据与客户端请求封装。
核心关键词Vue 异步组合式函数 loading error data 请求竞态 - 0008
Vue 组合式函数里的生命周期钩子，为什么通常要在 setup 同步注册？
解释当前组件实例上下文如何决定钩子归属，区分同步注册和异步回调，并说明 script setup 顶层 await 的编译支持、SSR 与副作用清理。
核心关键词Vue 组合式函数生命周期 setup 同步注册与 await - 0009
Vue 组合式函数为什么用 use 命名，返回普通对象还是 reactive 对象？
解释 use 前缀的沟通作用、普通对象包 ref 的解构优势，以及 reactive 返回值、动作方法、初始参数和可写状态接口的取舍。
核心关键词Vue 组合式函数 use 命名与返回 refs 约定 - 0010
Vue 组合式函数为什么返回 readonly 状态，更新应该从哪里进行？
解释只读代理如何限制正常调用者直接写入，同时保留内部更新的可观察性；区分 readonly、快照、冻结和权限控制，并设计有校验的动作接口。
核心关键词Vue 组合式函数 readonly 返回状态与动作接口 - 0011
Vue 组合式函数的 ref 放在模块顶层和函数内部，共享范围有什么区别？
对比模块单例和每次调用创建的 ref，说明多组件隔离、应用级状态、SSR 请求污染、外部监听寿命及测试重置，避免把组合式函数误当作天然独立实例。
核心关键词Vue 组合式函数模块状态与实例状态共享范围 - 0012
在 Vue 组合式函数里注册事件监听或定时器，如何保证组件卸载后不泄漏？
围绕“在 Vue 组合式函数里注册事件监听或定时器，如何保证组件卸载后不泄漏”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确在函数内部用 onUnmounted 或 watch 返回的停止句柄自动清理，使调用方无感知。
核心关键词Vue 组合式函数 副作用清理 onUnmounted watch 停止 - 0013
Vue 组合式函数怎样独立测试，什么时候仍需要挂载组件？
按纯计算、响应式副作用、生命周期与注入依赖选择测试方式，说明 effectScope、最小宿主、可控 Promise 和卸载清理，并区分 Node 模拟与真实浏览器验证。
核心关键词Vue 组合式函数单元测试 effectScope 与组件宿主 - 0014
Vue 组合式函数相比 mixin，具体改善了哪些复用问题？
从属性来源、命名冲突和隐式通信对比 composable 与 mixin，说明显式参数和返回值的价值，以及迁移生命周期、状态范围和旧行为时的边界。
核心关键词Vue 组合式函数与 mixin 来源冲突隐式依赖对比 - 0015
Vue 共享逻辑用组合式函数，跨层状态什么时候用 provide/inject？
区分逻辑封装与依赖获取，说明组合式函数和 provide/inject 如何配合，比较显式参数、最近提供者、子树隔离、只读状态和缺失依赖处理。
核心关键词Vue composable 参数传递与 provide inject 选型 - 0016
Vue Router 在组合式 API 中如何使用组件内守卫，同一路由组件参数变化复用时该用哪个钩子？
围绕“Vue Router 在组合式 API 中如何使用组件内守卫，同一路由组件参数变化复用时该用哪个钩子”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 onBeforeRouteUpdate 捕获同组件参数变化、onBeforeRouteLeave 捕获离开，且两者需在 set。
核心关键词Vue Router onBeforeRouteUpdate onBeforeRouteLeave 组合式 API - 0017
Vue 项目里路由懒加载的分包如何通过 prefetch 或 preload 提前获取而不阻塞首屏？
围绕“Vue 项目里路由懒加载的分包如何通过 prefetch 或 preload 提前获取而不阻塞首屏”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 prefetch 利用浏览器空闲带宽预取后续路由、preload 与当前路由并行加载关键资源，及魔法注释配置方式。
核心关键词Vue 懒加载 webpackPrefetch webpackPreload 预取 分包 - 0018
Vue Router 的全局前置守卫里做登录重定向时，为什么会出现无限循环跳转，如何避免？
围绕“Vue Router 的全局前置守卫里做登录重定向时，为什么会出现无限循环跳转，如何避免”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确重定向目标再次触发守卫形成循环的原因，及在守卫内判断目标路由本身、使用 return 代替重复 next 调用的修复方式。
核心关键词Vue Router 重定向 无限循环 beforeEach 登录 - 0019
被 Vue KeepAlive 缓存的组件为什么 mounted 只执行一次，数据刷新应该放在哪个生命周期？
围绕“被 Vue KeepAlive 缓存的组件为什么 mounted 只执行一次，数据刷新应该放在哪个生命周期”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确缓存组件切换走 activated/deactivated 而非 mounted/unmounted，拉取最新数据应放 acti。
核心关键词Vue KeepAlive activated deactivated 生命周期 数据刷新 - 0020
运行中动态增删需要缓存的 Vue 组件时，include 绑定响应式数组有什么注意事项？
围绕“运行中动态增删需要缓存的 Vue 组件时，include 绑定响应式数组有什么注意事项”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 include 可绑定响应式数组实时生效、组件 name 必须稳定且唯一，以及删除后实例立即销毁的影响。
核心关键词Vue KeepAlive include 响应式 动态缓存 数组 - 0021
Vue KeepAlive 的 include/exclude 匹配依据是什么，为什么常出现配置后不生效的问题？
围绕“Vue KeepAlive 的 include/exclude 匹配依据是什么，为什么常出现配置后不生效的问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确匹配的是组件自身 name 选项（script setup 需额外声明）而非路由名，及 max 数量的作用。
核心关键词Vue KeepAlive include exclude 组件 name 匹配 不生效 - 0022
Vue KeepAlive 的 max 属性触发淘汰时按什么规则移除缓存实例，设置时要权衡什么？
围绕“Vue KeepAlive 的 max 属性触发淘汰时按什么规则移除缓存实例，设置时要权衡什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确超出 max 时按最近最少使用剪枝最久未访问的实例，以及 max 过小导致频繁重建、过大占用内存的权衡。
核心关键词Vue KeepAlive max LRU 淘汰 内存 权衡 - 0023
如何实现列表页进入详情后返回时保留滚动位置，而从其他页面进入列表时重新加载的 KeepAlive 缓存策略？
围绕“如何实现列表页进入详情后返回时保留滚动位置，而从其他页面进入列表时重新加载的 KeepAlive 缓存策略”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确结合路由 meta 标记与 include 动态计算（如在守卫中按来源路由增删缓存名单）的条件缓存方案。
核心关键词Vue KeepAlive 路由 meta 动态缓存 列表 滚动位置 - 0024
使用 Vue KeepAlive 后表单残留或数据过期，如何定位是缓存导致并选择刷新手段？
围绕“使用 Vue KeepAlive 后表单残留或数据过期，如何定位是缓存导致并选择刷新手段”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确通过 deactivated 不销毁的特征确认缓存行为，并用给组件加 key 强制重建、activated 中重取数据或移除缓存。
核心关键词Vue KeepAlive 数据过期 表单残留 缓存 刷新 key - 0025
Vue Router 的 router.push 返回的导航结果如何区分重复导航、被中止和被取消？
围绕“Vue Router 的 router.push 返回的导航结果如何区分重复导航、被中止和被取消”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确用 isNavigationFailure 配合三种失败类型区分 aborted、cancelled、duplicated，并说。
核心关键词Vue Router 导航失败 isNavigationFailure NavigationFailureType - 0026
Vue Router 在一次导航中，全局守卫、路由独享守卫和组件内守卫的完整执行顺序是什么？
围绕“Vue Router 在一次导航中，全局守卫、路由独享守卫和组件内守卫的完整执行顺序是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答要按失活组件守卫→全局前置→复用组件 update→路由配置→新组件 enter→全局解析→组件内解析的顺序讲清。
核心关键词Vue Router 导航守卫 执行顺序 beforeEach beforeEnter beforeRouteEnter - 0027
Pinia 的 action 中处理异步请求与业务错误，推荐怎样的组织方式？
围绕“Pinia 的 action 中处理异步请求与业务错误，推荐怎样的组织方式”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 action 天然支持 async/await、把请求结果写回 state 与错误抛出/收敛的策略。
核心关键词Pinia action 异步 错误处理 async await - 0028
Pinia 的 getter 需要接收参数时为什么要返回一个函数，这样做会失去什么能力？
围绕“Pinia 的 getter 需要接收参数时为什么要返回一个函数，这样做会失去什么能力”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确返回闭包实现参数化查询，但缓存随之失效每次调用重新计算，需注意大列表过滤的性能。
核心关键词Pinia getter 传参 返回函数 缓存失效 - 0029
Pinia 如何配置才能让 store 在 Vite 热更新时保留状态？
围绕“Pinia 如何配置才能让 store 在 Vite 热更新时保留状态”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确在 store 模块末尾用 acceptHMRUpdate 注册以在模块替换后迁移 state。
核心关键词Pinia HMR 热更新 import.meta.hot acceptHMRUpdate - 0030
如何用 Pinia 插件机制给 store 增加本地持久化能力？
围绕“如何用 Pinia 插件机制给 store 增加本地持久化能力”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确插件接收 store 上下文、用 $subscribe 监听变化写入存储并在初始化时恢复的机制。
核心关键词Pinia 插件 持久化 localStorage $subscribe - 0031
Pinia 的 Setup Store 没有内置 $reset，应该如何实现状态重置？
围绕“Pinia 的 Setup Store 没有内置 $reset，应该如何实现状态重置”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确手动将 state 恢复为初始值（保存初始快照或使用 $patch）以及通过插件统一注入 $reset 的方案。
核心关键词Pinia setup store $reset 状态重置 实现 - 0032
Pinia 的 Setup Store 与 Options Store 两种写法分别在什么场景下更合适？
围绕“Pinia 的 Setup Store 与 Options Store 两种写法分别在什么场景下更合适”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 Setup Store 可自由使用组合式函数与局部私有状态、Options Store 更接近 Vuex 迁移路径。
核心关键词Pinia setup store options store 写法 选择 - 0033
解构 Pinia store 时为什么要用 storeToRefs，直接解构会丢失什么？
围绕“解构 Pinia store 时为什么要用 storeToRefs，直接解构会丢失什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确直接解构 state 属性会切断响应式连接、storeToRefs 只转换 state 与 getter 而方法可直接解构。
核心关键词Pinia storeToRefs 解构 响应式丢失 - 0034
Pinia 相比 Vuex 在 API 设计上做了哪些取舍，为什么取消 mutation？
围绕“Pinia 相比 Vuex 在 API 设计上做了哪些取舍，为什么取消 mutation”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 mutation 冗余带来的样板代码问题、Pinia 以 action 直接改状态换取的类型推导与简洁性。
核心关键词Pinia Vuex 区别 取消 mutation 设计动机 - 0035
Vue Router 的路由懒加载如何通过动态 import 实现，如何控制打包产物按路由分组？
围绕“Vue Router 的路由懒加载如何通过动态 import 实现，如何控制打包产物按路由分组”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确路由 component 用 () => import() 触发按需加载与构建器自动分包，及命名 chunk 合并相关路由的做法。
核心关键词Vue Router 路由懒加载 动态 import 代码分割 chunk - 0036
如何用 Vue Router 的 meta 字段配合全局守卫实现基于角色的页面权限控制？
围绕“如何用 Vue Router 的 meta 字段配合全局守卫实现基于角色的页面权限控制”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确在 meta 声明所需角色、beforeEach 中读取匹配链上的 meta 做判定并合并多级 meta 的规则。
核心关键词Vue Router meta 权限 角色 路由守卫 设计 - 0037
Vue SSR 应用里需要访问 window 或 localStorage 时，代码应该放在哪里才不会在服务端报错？
围绕“Vue SSR 应用里需要访问 window 或 localStorage 时，代码应该放在哪里才不会在服务端报错”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 setup 与 created 会在服务端执行故不能直接访问浏览器 API，应放 onMounted 或用客户端环境判断惰性访。
核心关键词Vue SSR window localStorage onMounted 客户端判断 - 0038
Vue SSR 中为什么每个请求都要创建新的应用实例和 store，否则会出什么问题？
围绕“Vue SSR 中为什么每个请求都要创建新的应用实例和 store，否则会出什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 Node 端模块在请求间共享，单例应用或模块级状态会把用户 A 的数据泄漏给用户 B，需用工厂函数按请求创建。
核心关键词Vue SSR 跨请求状态污染 应用实例 工厂函数 - 0039
Vue SSR 的服务端预取数据如何传递到客户端并避免重复请求？
围绕“Vue SSR 的服务端预取数据如何传递到客户端并避免重复请求”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确服务端渲染前完成数据获取、把状态序列化注入 HTML、客户端激活时以此初始化 store 从而跳过重复请求。
核心关键词Vue SSR 数据预取 状态注水 serverPrefetch Pinia - 0040
Vue SSR 中 hydration 不匹配报错的常见原因有哪些，如何定位？
围绕“Vue SSR 中 hydration 不匹配报错的常见原因有哪些，如何定位”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确服务端与客户端渲染结果不一致的典型来源（随机值、时间戳、依赖 window 的初始状态、无效 HTML 嵌套）及用一致性数据或仅。
核心关键词Vue SSR hydration mismatch 不匹配 排查 - 0041
Vue 应用做 SSR 时哪些生命周期钩子会在服务端执行，这对代码编写有什么约束？
围绕“Vue 应用做 SSR 时哪些生命周期钩子会在服务端执行，这对代码编写有什么约束”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确服务端只执行 beforeCreate、created 与 setup，其余钩子仅客户端执行，因此副作用代码必须放客户端专属钩子。
核心关键词Vue SSR 生命周期 服务端执行 beforeCreate created setup - 0042
面对一个内容型站点与一个强交互后台，分别该选 Vue 的 SSR、SSG 还是纯 CSR，判断依据是什么？
围绕“面对一个内容型站点与一个强交互后台，分别该选 Vue 的 SSR、SSG 还是纯 CSR，判断依据是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确按 SEO 需求、内容更新频率、服务器成本与首屏指标四维做模式选型。
核心关键词Vue SSR SSG CSR 渲染模式 选型 依据 - 0043
Vue 的 Suspense 如何协调多个异步组件和 setup 中的异步依赖，与 defineAsyncComponent 是什么关系？
围绕“Vue 的 Suspense 如何协调多个异步组件和 setup 中的异步依赖，与 defineAsyncCompo”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确 Suspense 收集子树内所有挂起的异步依赖统一展示 fallback，defineAsyncComponent 管单个组件。
核心关键词Vue Suspense 异步依赖 async setup defineAsyncComponent 关系 - 0044
Vue watch 开启 deep 会发生什么，为什么可能增加性能成本？
解释 deep 对嵌套读取与变化观察的影响，补充 Vue 3.5 数字深度边界、深监听不生成旧快照，以及大表单和大型数据树如何缩小监听范围。
核心关键词Vue watch deep 深度监听性能 - 0045
把纯静态路由表、常量字典或巨型不可变 JSON 全量 reactive 化，在 Vue 中主要浪费什么，应该怎么降级？
围绕“把纯静态路由表、常量字典或巨型不可变 JSON 全量 reactive 化，在 Vue 中主要浪费什么，应该怎么降级”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确多余代理与深层追踪带来内存/初始化成本，静态数据用 markRaw/shallowRef/普通常量。
核心关键词Vue 静态配置过度响应式 性能浪费 降级 - 0046
什么时候应把第三方实例、DOM 节点或不可变配置放进 Vue 的 markRaw，而不是 reactive？
围绕“什么时候应把第三方实例、DOM 节点或不可变配置放进 Vue 的 markRaw，而不是 reactive”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要明确跳过代理可避免内部槽位/循环引用/性能问题且失去响应式。
核心关键词Vue markRaw 第三方实例 使用时机