C44. 条件渲染 列表渲染

4.1. v-if 和 v-show 指令使得内容只在指定条件下显示

v-if 和 v-show 是 Vue 的条件渲染指令，控制元素是否显示，但实现原理不同。

🔄 对比与用法：

v-if：

• 原理：根据条件动态移除/添加元素。
• 适用场景：条件很少变化或需要完全移除元素时。
• 示例：

  <template>
    <p v-if="isLogin">欢迎回来，{{ username }}！</p>
    <p v-else>请登录</p>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  const isLogin = ref(false);
  const username = ref('');
  </script>

v-show：

• 原理：通过 CSS display 属性控制显示/隐藏。
• 适用场景：频繁切换显示状态时（性能更优）。
• 示例：

  <template>
    <p v-show="isHidden">这是一个隐藏的段落</p>
    <button @click="isHidden = !isHidden">切换显示</button>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  const isHidden = ref(true);
  </script>

WARNING

• 不要同时使用 v-if 和 v-show，优先选择一种。
• v-if 有更高的切换开销，但初次渲染时更轻量。
• v-show 始终渲染元素，仅控制可见性。

4.2. v-for 指令简化数组数据的渲染

v-for 是 Vue 的列表渲染指令，通过遍历数组、对象或范围生成重复元素。

🔄 基础用法：

遍历数组：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index }}: {{ item }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
const items = ref(['苹果', '香蕉', '橘子']);
</script>

遍历对象：

<template>
  <div v-for="(value, key) in user" :key="key">
    {{ key }}: {{ value }}
  </div>
</template>

<script setup>
import { ref } from 'vue';
const user = ref({ name: '张三', age: 25, city: '北京' });
</script>

遍历数字范围：

<template>
  <div v-for="n in 5" :key="n">
    数字 {{ n }}
  </div>
</template>

4.3. v-for 指令需要 key 属性辅助 diff 算法

key 是 v-for 的必需属性，帮助 Vue 识别每个节点的身份，优化列表更新性能。

🔍 核心原理：

• Diff 算法：Vue 通过 key 区分元素，判断是复用、更新还是移动 DOM 节点。
• 最佳实践：使用唯一标识符（如 id）而非索引。

📝 示例代码：

<template>
  <ul>
    <!-- 正确用法：使用唯一 id -->
    <li v-for="item in products" :key="item.id">
      {{ item.name }} - ¥{{ item.price }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
const products = ref([
  { id: 1, name: '笔记本', price: 5000 },
  { id: 2, name: '鼠标', price: 50 }
]);
</script>

⚠️ 常见错误：

<template>
  <!-- 错误：使用索引作为 key -->
  <li v-for="(item, index) in items" :key="index">...</li>
</template>

• 问题：当列表项顺序变化时，Vue 无法正确识别节点，导致渲染混乱。
• 替代方案：优先用唯一 id，或使用 item.id 等稳定属性。

知识回顾

1. 条件渲染：
   • v-if：动态移除/添加元素，适合条件不频繁变化。
   • v-show：通过 CSS 控制显示，适合频繁切换。
2. 列表渲染：
   • v-for：遍历数组、对象或范围生成重复元素。
   • key：唯一标识节点，辅助 Vue 优化 Diff 算法。
3. 性能优化：
   • 避免使用索引作为 key，推荐使用唯一标识符。

课后练习

1. 单选题： 以下哪种场景适合使用 v-if 而非 v-show？

   • A. 频繁切换显示的按钮
   • B. 首次加载后不再显示的提示框
   • C. 动态切换的标签页内容
   • D. 高频动画组件

2. 填空题： 在 v-for 中，key 的作用是帮助 Vue 识别______，从而优化______算法。

3. 代码纠错： 修复以下代码的 key 错误：

   <ul>
     <li v-for="product in products" :key="products.indexOf(product)">
       {{ product.name }}
     </li>
   </ul>

4. 操作题： 使用 v-for 渲染以下数组，并通过 key 正确标识每个用户：

   const users = [
     { id: 1, name: '张三' },
     { id: 2, name: '李四' }
   ];

5. 扩展题： 设计一个购物车组件，要求：

   • 通过 v-for 渲染商品列表（包含名称、价格和数量）。
   • 使用 v-if 隐藏空购物车提示。
   • 为每个商品添加删除按钮，点击后从列表中移除。