v-if和v-show区别

在Vue中，v-if和v-show都是条件渲染指令，但核心区别在于DOM操作方式和性能表现，面试回答需抓住以下关键点：

1. 本质区别

• v-if：真正的条件渲染

  • 动态创建或销毁DOM元素（及其子组件、事件监听器）。

  • 条件为false时，元素完全不存在于DOM中。

  • 惰性渲染：初始条件为false时，元素不会渲染，直到条件首次变为true。

• v-show：CSS控制显示

  • 元素始终存在于DOM中，仅通过切换CSS的display属性（none/block）控制显示/隐藏。

  • 非惰性：无论初始条件如何，元素都会被渲染。

2. 性能对比

3. 使用场景

• v-if 适用场景：

  • 条件很少改变（如权限控制、初始化加载）。

  • 需要避免不必要的组件初始化开销（如复杂组件）。

  • 示例：用户未登录时不渲染用户中心组件。

• v-show 适用场景：

  • 需要频繁切换显示状态（如标签页、弹窗）。

  • 元素初始渲染成本较低，且切换频繁。

  • 示例：页面中的折叠面板、提示信息。

4. 附加细节

• v-if 与 v-else/v-else-if：
  v-if支持分支结构（v-else、v-else-if），而v-show不支持。

• 生命周期：
  v-if在条件切换时会触发组件的mounted/unmounted生命周期；v-show不会触发。

• <template> 元素：
  v-if可作用于<template>（包裹多个元素），v-show不可（因为<template>最终不会渲染为DOM元素）。

面试回答示例

“v-if和v-show的核心区别在于DOM操作方式：

• v-if 会动态创建或销毁DOM元素，条件为false时元素不存在于DOM中，初始渲染更高效但切换开销大，适合不常变化的条件（如权限控制）。

• v-show 通过CSS display控制显示隐藏，元素始终在DOM中，切换成本低，适合频繁切换的场景（如弹窗）。
  此外，v-if支持分支结构（v-else），且能作用于<template>，而v-show不支持。”

v-if是“懒加载”，条件满足才渲染；v-show是“预加载”，始终渲染但可隐藏。