你是不是也曾经在写Vue时纠结过：这里到底该用v-if还是v-show？
或者更惨的是，明明代码逻辑没问题，列表渲染却总是出现各种诡异bug：删除一个项，结果删错了；切换数据，页面状态全乱了...
别担心，今天我就来帮你彻底搞懂Vue的条件渲染和列表渲染，让你写出更优雅、更高效的代码！
v-if和v-show：看似相似，实则大不相同
先来看个最简单的例子：
1<!-- v-if 的用法 --> 2<div v-if="isVisible">我会在条件为真时渲染</div> 3 4<!-- v-show 的用法 --> 5<div v-show="isVisible">我总是会被渲染，只是通过CSS控制显示</div> 6
看起来差不多对不对？但它们的底层机制完全不同！
v-if是真正的条件渲染：当条件为false时，元素根本不会出现在DOM中。就像你决定今天要不要带伞出门，不下雨就干脆不带。
v-show只是CSS切换：不管条件如何，元素都会被渲染到DOM中，只是通过display属性来控制显示隐藏。就像你总是带着伞，只是根据天气决定要不要撑开。
性能对比：什么时候该用哪个？
来段代码让你直观感受它们的差异：
1<template> 2 <div> 3 <!-- 频繁切换的场景 --> 4 <button @click="toggle">切换显示状态</button> 5 6 <!-- 适合用v-show：频繁切换，初始渲染成本高 --> 7 <div class="heavy-component" v-show="isVisible"> 8 <h3>这是一个很重的组件</h3> 9 <!-- 假设这里有很多复杂的DOM结构和计算 --> 10 </div> 11 12 <!-- 适合用v-if：不常变化，或者条件为false时想节省资源 --> 13 <div v-if="hasPermission"> 14 <h3>管理员专属内容</h3> 15 <!-- 这部分内容只有管理员能看到，普通用户根本不需要渲染 --> 16 </div> 17 </div> 18</template> 19 20<script> 21export default { 22 data() { 23 return { 24 isVisible: false, 25 hasPermission: false 26 } 27 }, 28 methods: { 29 toggle() { 30 this.isVisible = !this.isVisible 31 // 如果这里用v-if，每次切换都要重新创建/销毁组件 32 // 用v-show就只是切换CSS，性能好很多 33 } 34 } 35} 36</script> 37
使用场景总结：
- 需要频繁切换显示状态 → 用
v-show - 运行时条件很少改变 → 用
v-if - 需要条件为false时完全节省资源 → 用
v-if - 初始渲染成本高的组件 → 考虑
v-show
列表渲染的key属性：小细节，大作用
现在我们来聊聊列表渲染中那个经常被忽略，却又极其重要的key属性。
先看一个没有key的典型问题：
1<template> 2 <div> 3 <div v-for="item in list"> 4 {{ item.name }} 5 <input type="text" placeholder="试试在这里输入内容"> 6 </div> 7 <button @click="removeFirst">删除第一项</button> 8 </div> 9</template> 10 11<script> 12export default { 13 data() { 14 return { 15 list: [ 16 { id: 1, name: '苹果' }, 17 { id: 2, name: '香蕉' }, 18 { id: 3, name: '橙子' } 19 ] 20 } 21 }, 22 methods: { 23 removeFirst() { 24 this.list.shift() // 删除第一项 25 // 问题来了：如果你在第一个input里输入了文字，删除后文字会跑到第二个input里！ 26 } 27 } 28} 29</script> 30
为什么会这样？因为Vue在更新DOM时，默认使用"就地复用"策略。没有key的时候，它不知道哪个元素对应哪个数据，只能简单地进行位置对比。
加上key，问题迎刃而解
1<template> 2 <div> 3 <!-- 正确的做法：使用唯一标识作为key --> 4 <div v-for="item in list" :key="item.id"> 5 {{ item.name }} 6 <input type="text" placeholder="现在输入内容再删除试试"> 7 </div> 8 </div> 9</template> 10
加上item.id作为key后，Vue就能准确追踪每个节点的身份，删除操作再也不会混乱了！
key的高级用法：强制组件重建
key的真正威力不止于此，它还能用来强制组件重新渲染！
假设我们有这样一个需求：一个计数器组件，需要在某些情况下完全重置：
1<template> 2 <div> 3 <!-- 普通用法：切换showCounter时组件会保持状态 --> 4 <CounterComponent v-if="showCounter" /> 5 6 <!-- 高级用法：通过改变key来强制重新创建组件 --> 7 <CounterComponent 8 v-if="showCounter" 9 :key="componentKey" 10 /> 11 12 <button @click="resetComponent">重置计数器</button> 13 </div> 14</template> 15 16<script> 17export default { 18 data() { 19 return { 20 showCounter: true, 21 componentKey: 0 22 } 23 }, 24 methods: { 25 resetComponent() { 26 // 改变key值，Vue会认为这是不同的组件，从而销毁旧实例，创建新实例 27 this.componentKey += 1 28 } 29 } 30} 31</script> 32
这个技巧在很多场景下都超级有用：
场景1：表单重置
1<template> 2 <div> 3 <!-- 用户提交表单后，通过改变key来清空所有输入 --> 4 <UserForm :key="formKey" /> 5 <button @click="handleSubmit">提交</button> 6 <button @click="resetForm">重置表单</button> 7 </div> 8</template> 9 10<script> 11export default { 12 data() { 13 return { 14 formKey: 0 15 } 16 }, 17 methods: { 18 handleSubmit() { 19 // 提交表单逻辑... 20 }, 21 resetForm() { 22 // 简单粗暴但有效：改变key，整个表单组件重新创建 23 this.formKey += 1 24 } 25 } 26} 27</script> 28
场景2：路由参数变化但组件相同
1<template> 2 <div> 3 <!-- 同一个组件，不同ID的用户详情页 --> 4 <UserProfile :key="$route.params.userId" /> 5 </div> 6</template> 7
场景3：强制重新触发生命周期
1<template> 2 <div> 3 <!-- 需要重新执行mounted等生命周期时 --> 4 <DataFetcher :key="refreshKey" /> 5 <button @click="refreshData">刷新数据</button> 6 </div> 7</template> 8 9<script> 10export default { 11 data() { 12 return { 13 refreshKey: 0 14 } 15 }, 16 methods: { 17 refreshData() { 18 this.refreshKey += 1 // 强制重新创建组件，重新执行mounted 19 } 20 } 21} 22</script> 23
实战技巧：组合使用的最佳实践
在实际项目中，我们经常需要把这些技巧组合使用。来看一个综合例子：
1<template> 2 <div> 3 <!-- 用户列表 --> 4 <div 5 v-for="user in filteredUsers" 6 :key="user.id" 7 class="user-item" 8 > 9 <!-- 用户基本信息总是显示 --> 10 <div class="user-basic"> 11 <span>{{ user.name }}</span> 12 <button @click="toggleDetails(user.id)"> 13 {{ showDetails[user.id] ? '收起' : '展开' }} 14 </button> 15 </div> 16 17 <!-- 详细信息：不常切换，用v-if节省资源 --> 18 <div v-if="showDetails[user.id]" class="user-details"> 19 <p>邮箱：{{ user.email }}</p> 20 <p>电话：{{ user.phone }}</p> 21 <!-- 假设详情部分有很多复杂内容 --> 22 </div> 23 24 <!-- 编辑状态：频繁切换，用v-show保持响应 --> 25 <div v-show="editingUser === user.id" class="edit-form"> 26 <input v-model="user.name" /> 27 <button @click="saveUser(user)">保存</button> 28 </div> 29 </div> 30 31 <!-- 空状态提示：用v-if，没有数据时完全不需要渲染 --> 32 <div v-if="filteredUsers.length === 0" class="empty-state"> 33 暂无用户数据 34 </div> 35 </div> 36</template> 37 38<script> 39export default { 40 data() { 41 return { 42 users: [], 43 showDetails: {}, 44 editingUser: null 45 } 46 }, 47 computed: { 48 filteredUsers() { 49 // 假设有过滤逻辑 50 return this.users 51 } 52 }, 53 methods: { 54 toggleDetails(userId) { 55 // 使用Vue.set或this.$set确保响应式 56 this.$set(this.showDetails, userId, !this.showDetails[userId]) 57 } 58 } 59} 60</script> 61
避坑指南：常见错误与解决方案
错误1：用索引作为key
1<!-- 不要这样做！ --> 2<div v-for="(item, index) in list" :key="index"> 3 {{ item.name }} 4</div> 5 6<!-- 应该这样做 --> 7<div v-for="item in list" :key="item.id"> 8 {{ item.name }} 9</div> 10
为什么不能用索引？因为当列表顺序变化时，索引无法正确追踪元素！
错误2：v-if和v-for用在一起
1<!-- 性能不好 --> 2<div v-for="item in list" v-if="item.isActive" :key="item.id"> 3 {{ item.name }} 4</div> 5 6<!-- 更好的做法 --> 7<div v-for="item in activeItems" :key="item.id"> 8 {{ item.name }} 9</div> 10 11<script> 12export default { 13 computed: { 14 activeItems() { 15 return this.list.filter(item => item.isActive) 16 } 17 } 18} 19</script> 20
错误3：忘记处理边界情况
1<template> 2 <div> 3 <!-- 好的做法：考虑各种边界情况 --> 4 <div v-if="isLoading">加载中...</div> 5 <div v-else-if="list.length === 0">暂无数据</div> 6 <div v-else v-for="item in list" :key="item.id"> 7 {{ item.name }} 8 </div> 9 </div> 10</template> 11
总结
今天我们一起深入探讨了Vue条件渲染和列表渲染的核心技巧：
- v-if vs v-show：理解它们的本质区别，根据使用频率和性能需求做出正确选择
- key的重要性：不仅是避免渲染bug，更是Vue高效更新的关键
- key的高级用法：强制组件重建，解决状态管理难题
- 组合使用的最佳实践：在实际项目中灵活运用这些技巧
记住，好的开发者不仅要让代码能运行，更要让代码运行得高效、优雅。这些看似小的细节，往往决定了你代码的质量。
现在，回头检查一下你的项目，有没有可以优化的地方？欢迎在评论区分享你的实战经验！
《还在纠结用v-if还是v-show？看完这篇彻底搞懂Vue渲染机制！》 是转载文章，点击查看原文。
