面试备战录

1、Vue 性能优化等

• 减少不必要的响应式数据
  • 只把真正需要响应式的数据放入data / reactive / ref,比如 options,config,临时计算值等不要放入响应式
• 事件频率控制（节流/防抖）
  • 滚动、输入、resize 等事件使用 throttle 或 debounce 限制频率
  • 使用 lodash.debounce 或 requestAnimationFrame（会在下一帧渲染之前执行）
• 懒加载
  • 组件懒加载（路由层）：

  component: () => import('@/views/applyVirCard/index.vue'),
  

  • 图片懒加载（使用指令或插件如 vue-lazyload）
• 列表渲染优化
  • 使用key唯一标识 item
  • 长列表建议分页 / 虚拟滚动（如 vue-virtual-scroller）
• 减少组件重渲染
  • 使用computed替代 methods，避免重复执行
  • watch 精准监听避免浪费

Vue 3 特有的性能优化

• 编译优化：静态提升 & Patch Flag (你只需写好模板，Vue 编译器就会自动优化)
  • 静态内容提前提升（减少 diff）
  • 添加 PatchFlag 精准定位需要比对的地方
• 响应式延迟初始化 (Vue 3 的 reactive / ref 只在真正访问或使用时才建立依赖关系)
  • 而 Vue 2 会一开始递归劫持整个 data 树，性能差
• Tree-shaking 友好
  • Vue 3 架构为模块化 API（如 reactive, watchEffect, onMounted）
  • 编译后只保留用到的部分，减少体积
• Teleport
  • 避免复杂嵌套时将 DOM 传送到外层（适合弹窗、全局提示）

<Teleport to="body">
  <div class="modal">内容</div>
</Teleport>

实际开发建议与工具

• 使用异步组件拆分

const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

• 按需引入第三方库,避免整库引入，比如 Element Plus、Lodash，使用：
• 借助性能工具
  • Chrome Performance 面板：查看组件 render 时间、内存占用
  • Vue DevTools：查看组件嵌套层级、响应式追踪
• 生产环境构建优化
  • 开启 gzip / brotli 压缩
  • 配置 Webpack/Turbo/ESBuild 做 bundle 分析和优化（webpack-bundle-analyzer）

2、v-if 和 v-show 的区别

答：v-if和v-show是 Vue 中控制元素显示/隐藏的两个常用指令，但它们的实现机制不同，使用场景也各有区别。

• v-if
  • 会真实的销毁 DOM，是动态方式创建/销毁 DOM，对于性能消耗比较大
  • 主要用于一些 DOM 操作不太频繁的 DOM
• v-show
  • 没有真实的销毁 DOM，只是通过display: none控制 DOM 的显示和隐藏，初始之后显示隐藏性能消耗相对比较小
  • 主要用于tab 切换,需要频繁隐藏显示的组件

注：

• 如果是包裹着组件初始渲染控制v-if或者v-show的变量是 false，使用v-if包裹的组件不会执行生命周期，v-show会执行
• 如果初始后切换显示隐藏组件，使用v-if控制的每次显示时都会执行生命周期，v-show的不会执行
• 在初始渲染时使用v-if可以减少一些 DOM 的渲染，生成 DOM 树会更小,但是后续控制 DOM 组件显隐销毁性能较大；v-show是初次时会渲染所有的 DOM,生成的 DOM 树更大，但是后续控制 DOM 组件显隐销毁性能较小；