Vue Router 的全局前置守卫里做登录重定向时,为什么会出现无限循环跳转,如何避免?
围绕“Vue Router 的全局前置守卫里做登录重定向时,为什么会出现无限循环跳转,如何避免”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确重定向目标再次触发守卫形成循环的原因,及在守卫内判断目标路由本身、使用 return 代替重复 next 调用的修复方式。
性能优化专题面试题第 7 页,显示第 301–340 题,共找到 340 道完整解析,可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
围绕“Vue Router 的全局前置守卫里做登录重定向时,为什么会出现无限循环跳转,如何避免”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确重定向目标再次触发守卫形成循环的原因,及在守卫内判断目标路由本身、使用 return 代替重复 next 调用的修复方式。
围绕“被 Vue KeepAlive 缓存的组件为什么 mounted 只执行一次,数据刷新应该放在哪个生命周期”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确缓存组件切换走 activated/deactivated 而非 mounted/unmounted,拉取最新数据应放 acti。
围绕“运行中动态增删需要缓存的 Vue 组件时,include 绑定响应式数组有什么注意事项”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确 include 可绑定响应式数组实时生效、组件 name 必须稳定且唯一,以及删除后实例立即销毁的影响。
围绕“Vue KeepAlive 的 include/exclude 匹配依据是什么,为什么常出现配置后不生效的问题”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确匹配的是组件自身 name 选项(script setup 需额外声明)而非路由名,及 max 数量的作用。
围绕“Vue KeepAlive 的 max 属性触发淘汰时按什么规则移除缓存实例,设置时要权衡什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确超出 max 时按最近最少使用剪枝最久未访问的实例,以及 max 过小导致频繁重建、过大占用内存的权衡。
围绕“如何实现列表页进入详情后返回时保留滚动位置,而从其他页面进入列表时重新加载的 KeepAlive 缓存策略”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确结合路由 meta 标记与 include 动态计算(如在守卫中按来源路由增删缓存名单)的条件缓存方案。
围绕“使用 Vue KeepAlive 后表单残留或数据过期,如何定位是缓存导致并选择刷新手段”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确通过 deactivated 不销毁的特征确认缓存行为,并用给组件加 key 强制重建、activated 中重取数据或移除缓存。
围绕“Vue Router 的 router.push 返回的导航结果如何区分重复导航、被中止和被取消”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确用 isNavigationFailure 配合三种失败类型区分 aborted、cancelled、duplicated,并说。
围绕“Vue Router 在一次导航中,全局守卫、路由独享守卫和组件内守卫的完整执行顺序是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答要按失活组件守卫→全局前置→复用组件 update→路由配置→新组件 enter→全局解析→组件内解析的顺序讲清。
围绕“Pinia 的 action 中处理异步请求与业务错误,推荐怎样的组织方式”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确 action 天然支持 async/await、把请求结果写回 state 与错误抛出/收敛的策略。
围绕“Pinia 的 getter 需要接收参数时为什么要返回一个函数,这样做会失去什么能力”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确返回闭包实现参数化查询,但缓存随之失效每次调用重新计算,需注意大列表过滤的性能。
围绕“Pinia 如何配置才能让 store 在 Vite 热更新时保留状态”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确在 store 模块末尾用 acceptHMRUpdate 注册以在模块替换后迁移 state。
围绕“如何用 Pinia 插件机制给 store 增加本地持久化能力”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确插件接收 store 上下文、用 $subscribe 监听变化写入存储并在初始化时恢复的机制。
围绕“Pinia 的 Setup Store 没有内置 $reset,应该如何实现状态重置”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确手动将 state 恢复为初始值(保存初始快照或使用 $patch)以及通过插件统一注入 $reset 的方案。
围绕“Pinia 的 Setup Store 与 Options Store 两种写法分别在什么场景下更合适”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确 Setup Store 可自由使用组合式函数与局部私有状态、Options Store 更接近 Vuex 迁移路径。
围绕“解构 Pinia store 时为什么要用 storeToRefs,直接解构会丢失什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确直接解构 state 属性会切断响应式连接、storeToRefs 只转换 state 与 getter 而方法可直接解构。
围绕“Pinia 相比 Vuex 在 API 设计上做了哪些取舍,为什么取消 mutation”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确 mutation 冗余带来的样板代码问题、Pinia 以 action 直接改状态换取的类型推导与简洁性。
围绕“Vue Router 的路由懒加载如何通过动态 import 实现,如何控制打包产物按路由分组”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确路由 component 用 () => import() 触发按需加载与构建器自动分包,及命名 chunk 合并相关路由的做法。
围绕“如何用 Vue Router 的 meta 字段配合全局守卫实现基于角色的页面权限控制”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确在 meta 声明所需角色、beforeEach 中读取匹配链上的 meta 做判定并合并多级 meta 的规则。
围绕“Vue SSR 应用里需要访问 window 或 localStorage 时,代码应该放在哪里才不会在服务端报错”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确 setup 与 created 会在服务端执行故不能直接访问浏览器 API,应放 onMounted 或用客户端环境判断惰性访。
围绕“Vue SSR 中为什么每个请求都要创建新的应用实例和 store,否则会出什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确 Node 端模块在请求间共享,单例应用或模块级状态会把用户 A 的数据泄漏给用户 B,需用工厂函数按请求创建。
围绕“Vue SSR 的服务端预取数据如何传递到客户端并避免重复请求”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确服务端渲染前完成数据获取、把状态序列化注入 HTML、客户端激活时以此初始化 store 从而跳过重复请求。
围绕“Vue SSR 中 hydration 不匹配报错的常见原因有哪些,如何定位”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确服务端与客户端渲染结果不一致的典型来源(随机值、时间戳、依赖 window 的初始状态、无效 HTML 嵌套)及用一致性数据或仅。
围绕“Vue 应用做 SSR 时哪些生命周期钩子会在服务端执行,这对代码编写有什么约束”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确服务端只执行 beforeCreate、created 与 setup,其余钩子仅客户端执行,因此副作用代码必须放客户端专属钩子。
围绕“面对一个内容型站点与一个强交互后台,分别该选 Vue 的 SSR、SSG 还是纯 CSR,判断依据是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确按 SEO 需求、内容更新频率、服务器成本与首屏指标四维做模式选型。
围绕“Vue 的 Suspense 如何协调多个异步组件和 setup 中的异步依赖,与 defineAsyncCompo”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确 Suspense 收集子树内所有挂起的异步依赖统一展示 fallback,defineAsyncComponent 管单个组件。
解释 deep 对嵌套读取与变化观察的影响,补充 Vue 3.5 数字深度边界、深监听不生成旧快照,以及大表单和大型数据树如何缩小监听范围。
围绕“把纯静态路由表、常量字典或巨型不可变 JSON 全量 reactive 化,在 Vue 中主要浪费什么,应该怎么降级”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确多余代理与深层追踪带来内存/初始化成本,静态数据用 markRaw/shallowRef/普通常量。
围绕“什么时候应把第三方实例、DOM 节点或不可变配置放进 Vue 的 markRaw,而不是 reactive”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要明确跳过代理可避免内部槽位/循环引用/性能问题且失去响应式。
围绕“小程序逻辑层和渲染层之间通过什么机制通信,为什么说频繁跨线程通信是性能瓶颈”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须讲清数据经 Native 中转序列化的成本。
围绕“小程序页面滚动卡顿、长列表渲染慢时,从双线程与 setData 角度如何定位和优化”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出减少节点数、分页加载与 IntersectionObserver 等具体手段。
围绕“小程序 setData 触发视图更新的底层过程是怎样的,为什么只应传递变化的数据”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明数据传输与 diff 重渲染的链路及传输量对性能的影响。
围绕“在小程序滚动或高频事件中频繁调用 setData 会出什么问题,应如何治理”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖必须给出合并更新、节流或改用其他方案的具体取舍。
围绕“在前端做图片滤镜时,WebAssembly 相对 Canvas API 直接处理像素的角色怎么划分”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖划分 JS 负责像素进出、WASM 负责重计算内核的协作模式。
围绕“JS 与 WebAssembly 之间的数据拷贝如何成为性能瓶颈,怎么减少”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明进出边界拷贝成本与通过共享视图直接读写的减拷贝手段。
围绕“WebAssembly SIMD 相对标量版本在什么条件下才有加速收益”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明可向量化的数据并行循环才受益、检测支持与回退的必要性,不列指令清单。
围绕“优化 WebAssembly 应用启动时间与峰值性能的目标会冲突吗”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要讨论流式编译、模块裁剪、延迟实例化的取舍。
围绕“Webpack 官方建议的构建性能优化手段有哪些,应按什么顺序排查”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖给出版本升级、缩小 resolve 范围、减少 plugin/loader 开销等优先级,不深入持久化缓存细节。
围绕“Webpack resolve.alias 能解决哪些实际问题,配置时有什么容易踩的坑”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要讲清路径简化与模块替换两类用途及后缀/精确匹配陷阱,不讲解析性能。
围绕“Webpack resolve 的 extensions、alias、modules 配置如何影响构建速度”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明解析请求数量与文件系统探测开销的关系,不讲 alias 的业务用法。