Vue 教程：条件渲染与列表渲染的实用技巧与性能考量

快速概述

条件渲染与列表渲染是 Vue 构建动态界面的两大基石。条件渲染（v-if/v-show）解决“何时显示”的问题，列表渲染（v-for）解决“如何重复”的问题。二者适用于从简单页面到复杂单页应用（SPA）的所有场景。前置环境要求：具备 JavaScript 基础，并已安装 Node.js 与 Vue CLI（或通过 CDN 引入 Vue 2.x/3.x）。

核心概念与原理

Vue 是渐进式 JavaScript 框架，其核心库专注于视图层，通过响应式数据绑定实现视图与数据的同步更新。 条件渲染中，v-if 是“真正”的条件渲染，它会根据条件销毁或重建元素及其事件监听器；v-show 则始终渲染元素，仅通过 CSS 的 display 属性切换显隐。列表渲染的 v-for 指令用于遍历数组或对象，其优先级与 key 属性的正确使用直接关系到 DOM 复用与更新性能。

实战步骤与代码

步骤 1：基础条件渲染

<div id="app">
  <p v-if="isVisible">v-if：条件为真时渲染</p>
  <p v-show="isVisible">v-show：始终渲染，仅切换 display</p>
</div>
<script> new Vue({ el: '#app', data: { isVisible: true } }) </script>

步骤 2：列表渲染与 key 绑定

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.name }} <!-- 使用唯一 id 作为 key，避免使用 index -->
  </li>
</ul>
<script> new Vue({ el: '#app', data: { items: [{ id: 1, name: 'Vue' }, { id: 2, name: 'React' }] } }) </script>

步骤 3：列表动画增强交互

使用 transition-group 组件为列表添加入场、删除动画，提升用户体验。需设置 appear 属性实现初始渲染动画，并通过 tag 属性指定渲染的标签名。

<transition-group name="list" tag="ul" appear>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</transition-group>
<style> .list-enter-active, .list-leave-active { transition: all 0.5s ease; } .list-enter, .list-leave-to { opacity: 0; transform: translateX(30px); } </style>

常见坑点与优化

• key 使用 index 的陷阱：当列表顺序变化或插入元素时，使用 index 作为 key 会导致组件状态错乱，应使用唯一 id。
• v-if 与 v-for 同用：在 Vue 2 中 v-for 优先级高于 v-if，同用会导致性能浪费，建议通过计算属性过滤后再遍历。
• v-show 的适用场景：频繁切换显隐用 v-show，运行时很少改变用 v-if，避免不必要的 DOM 操作。
• 大数据量列表：对超长列表考虑虚拟滚动，或使用分页加载，避免一次性渲染过多 DOM 节点。