vue显示隐藏实现原理

Vue 显示隐藏的实现原理

Vue 中实现显示隐藏的核心原理是通过数据驱动 DOM 的渲染，主要依赖以下机制：

数据绑定与响应式系统

Vue 通过响应式系统监听数据变化。当 v-show 或 v-if 绑定的数据发生变化时，Vue 会自动触发组件的重新渲染或 DOM 操作。

v-show 的实现

v-show 通过 CSS 的 display 属性控制元素的显示与隐藏：

• 当条件为 true 时，设置 display: ''（恢复默认显示状态）。
• 当条件为 false 时，设置 display: none。

<div v-show="isVisible">内容</div>

编译后的代码逻辑类似：

if (isVisible) {
  el.style.display = '';
} else {
  el.style.display = 'none';
}

v-if 的实现

v-if 通过动态添加/移除 DOM 节点实现：

• 当条件为 true 时，将元素插入 DOM。
• 当条件为 false 时，从 DOM 中移除元素。

<div v-if="isVisible">内容</div>

编译后的逻辑类似：

if (isVisible) {
  // 创建节点并插入 DOM
  const node = createNode();
  parent.appendChild(node);
} else {
  // 从 DOM 中移除节点
  parent.removeChild(node);
}

性能对比

• v-show：初始渲染成本高（始终渲染 DOM），切换成本低（仅修改 CSS）。
• v-if：初始渲染成本低（惰性渲染），切换成本高（需重建/销毁组件）。

使用场景建议

• 频繁切换显示状态时使用 v-show。
• 运行时条件很少变化时使用 v-if，可减少初始 DOM 节点数量。