Vue 的 v-if 与 v-show，Android 的 GONE 与 INVISIBLE

在界面开发中，控制元素的显示和隐藏是最常见的需求之一。今天我们来聊聊 Vue.js 和 Android 中这两对"显示隐藏"控制器的异同，看看不同技术栈如何解决相似的问题。

🆚 核心对比：四个关键特性

特性	Vue `v-if`	Vue `v-show`	Android `GONE`	Android `INVISIBLE`
渲染机制	条件为假时完全销毁元素	始终渲染，只设置 `display: none`不可见不占位	从布局中完全移除	保留在布局中，不可见但占位
性能影响	切换时开销大，适合不频繁切换	只有 CSS 切换开销，适合频繁切换	会触发重新布局	不会触发重新布局
内存占用	不显示时不占用内存	始终占用内存	不占用布局资源	占用布局资源
生命周期	触发完整生命周期钩子	不触发生命周期	触发视图的附加/分离	视图状态不变

🔧 工作原理简析

Vue 的实现

vue 复制代码

<!-- v-if：条件为假时，元素从 DOM 中完全移除 -->
<div v-if="isVisible">我会被销毁/重建</div>

<!-- v-show：只是添加/移除 CSS 的 display 属性 -->
<div v-show="isVisible">我始终在 DOM 中，只是隐藏了</div>

Android 的实现

kotlin 复制代码

// GONE：完全从布局中移除，不占空间
view.visibility = if (isVisible) View.VISIBLE else View.GONE

// INVISIBLE：不可见，但仍占着原来的位置
view.visibility = if (isVisible) View.VISIBLE else View.INVISIBLE

🎯 使用场景指南

什么时候用 v-if / GONE？

适合场景：

权限控制组件（如管理员面板）
一次性弹窗/对话框
初始加载时不需渲染的内容
组件较重，隐藏时可释放内存

代码示例：

vue 复制代码

<!-- Vue：管理员功能，普通用户不需要渲染 -->
<admin-panel v-if="user.role === 'admin'" />

<!-- Android：根据网络状态切换视图 -->
if (isOnline) {
    onlineView.visibility = View.VISIBLE
    offlineView.visibility = View.GONE
}

什么时候用 v-show / INVISIBLE？

适合场景：

Tab 切换内容
下拉菜单/折叠面板
需要保持组件状态（如表单数据）
频繁显示/隐藏的动画元素

代码示例：

vue 复制代码

<!-- Vue：Tab 切换，保持组件状态 -->
<div v-show="activeTab === 'home'">首页内容</div>
<div v-show="activeTab === 'profile'">个人资料</div>

kotlin 复制代码

// Android：加载状态，避免布局跳动
progressBar.visibility = if (isLoading) View.VISIBLE else View.INVISIBLE

💡 一句话总结

v-if 和 GONE：不显示时完全移除，节省内存但切换开销大
v-show 和 INVISIBLE：只是隐藏，切换快但始终占用资源

🤔 如何选择？

记住这个简单的决策流程：

复制代码

需要控制显示/隐藏吗？
    ↓
是否频繁切换？
    ↓
是 → 用 v-show / INVISIBLE
否 → 用 v-if / GONE
    ↓
组件很重吗？    是 → 倾向用 v-if / GONE
    ↓
需要保持状态吗？  是 → 倾向用 v-show / INVISIBLE

🌟 总结

虽然 Vue 和 Android 是两种完全不同的技术栈，但在解决"显示隐藏"这个问题上，它们的思路是相通的：

彻底移除（v-if / GONE）适合不频繁切换、需要节省资源的场景
单纯隐藏（v-show / INVISIBLE）适合频繁切换、需要保持状态的场景