Vue 3 条件渲染与列表渲染完整指南

在 Vue 3 中，v-if、v-show 和 v-for 是非常常用的指令，帮助我们实现条件渲染和列表渲染。本文将详细介绍这些指令的基本用法、适用场景、常见优化技巧和注意事项。

一、`v-if` 指令

1. `v-if` 基本用法

v-if 是一个用于条件渲染的指令，根据表达式的结果决定是否渲染元素。表达式为真时，元素会被渲染；为假时，元素不会被插入到 DOM 中。

<template><button @click="toggle">切换显示</button><p v-if="isVisible">这是一个条件渲染的段落</p>
</template><script setup>
import { ref } from 'vue';const isVisible = ref(false);function toggle() {isVisible.value = !isVisible.value;
}
</script>

解释：

v-if="isVisible" 控制 p 标签的显示。点击按钮会切换 isVisible 的值，从而决定 p 标签的渲染与否。

2. `v-else-if` 和 `v-else`

v-else-if 和 v-else 是和 v-if 一起使用的条件分支。v-else-if 用于添加额外条件，而 v-else 则处理所有未被匹配的情况。

<template><button @click="changeStatus">切换状态</button><p v-if="status === 'loading'">加载中...</p><p v-else-if="status === 'success'">加载成功！</p><p v-else>加载失败，请重试。</p>
</template><script setup>
import { ref } from 'vue';const status = ref('loading');function changeStatus() {status.value = status.value === 'loading' ? 'success' : 'error';
}
</script>

解释：

status 的值不同会渲染出不同的内容，体现了 v-if、v-else-if 和 v-else 的联合使用方式。

3. `v-if` 与 `v-show` 的区别

v-if 是真正的条件渲染，不符合条件的元素不会被渲染到 DOM 中；适合用于较少切换的情况。
v-show 只是通过 CSS 设置元素的 display 属性来控制显示或隐藏，DOM 元素始终存在于页面中；适合频繁切换的场景。

二、`v-show` 指令

v-show 通过设置元素的 display 样式来控制显示隐藏。与 v-if 不同的是，v-show 不会动态移除或添加元素，而是直接切换其可见性。

`v-show` 用法示例

<template><button @click="toggle">切换显示</button><p v-show="isVisible">这是一个 v-show 的段落</p>
</template><script setup>
import { ref } from 'vue';const isVisible = ref(false);function toggle() {isVisible.value = !isVisible.value;
}
</script>

解释：

v-show="isVisible" 控制 p 标签的显示，通过 CSS 的 display: none 来实现隐藏，适合于需要频繁显示和隐藏的场景。

`v-if` 和 `v-show` 的选择

v-if 更适合在渲染开销较大的情况下使用，例如列表和复杂组件。
v-show 适合需要频繁显示和隐藏的简单元素，因为 v-show 只是通过 CSS 切换可见性。

三、`v-for` 指令

v-for 用于列表渲染，可以遍历数组或对象并生成对应的元素。它是 Vue 中处理重复数据的强大工具。

1. 基本用法

v-for 使用 item in items 的语法遍历一个数组，并在模板中渲染每个元素。为了提高渲染性能，建议使用 key 属性来唯一标识每个项目。

<template><ul><li v-for="(item, index) in items" :key="index">{{ item }}</li></ul>
</template><script setup>
import { ref } from 'vue';const items = ref(['苹果', '香蕉', '橘子']);
</script>

解释：

v-for="(item, index) in items" 遍历 items 数组，并将每个元素赋值给 item 变量，同时提供索引 index。

2. 使用 `v-for` 遍历对象

v-for 也可以用于遍历对象，语法为 (value, key, index) in object。

<template><ul><li v-for="(value, key) in info" :key="key">{{ key }}: {{ value }}</li></ul>
</template><script setup>
import { ref } from 'vue';const info = ref({name: '张三',age: 25,city: '北京'
});
</script>

解释：

v-for="(value, key) in info" 遍历 info 对象，分别将键赋值给 key，值赋值给 value，并生成每个键值对的列表项。

3. `v-for` 与 `v-if` 一起使用

当 v-for 与 v-if 同时存在时，v-if 优先级较高。在循环中使用条件判断时，建议放置在循环内部，以避免性能开销。

<template><ul><li v-for="item in items" :key="item.id" v-if="item.active">{{ item.name }}</li></ul>
</template><script setup>
import { ref } from 'vue';const items = ref([{ id: 1, name: '项目 A', active: true },{ id: 2, name: '项目 B', active: false },{ id: 3, name: '项目 C', active: true }
]);
</script>

解释：

仅渲染 active 为 true 的项目，避免不必要的元素渲染以优化性能。

4. `v-for` 中的 `key` 属性

key 属性帮助 Vue 更好地追踪元素的变化，提高渲染性能。通常，我们将唯一标识字段（如 id）作为 key 的值。

<template><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul>
</template><script setup>
import { ref } from 'vue';const items = ref([{ id: 1, name: '项目 A' },{ id: 2, name: '项目 B' },{ id: 3, name: '项目 C' }
]);
</script>

注意事项：

避免使用索引 index 作为 key，因为数据变化时索引可能会变化，导致重新渲染，影响性能。

四、`v-if`、`v-show` 和 `v-for` 的最佳实践

v-if 与 v-show 的选择：
- 如果是较少切换且渲染开销大的组件，使用 v-if。
- 如果是频繁切换的简单元素，使用 v-show。
避免 v-for 与 v-if 一起使用：
- 若同时使用 v-for 和 v-if，建议将 v-if 放在 v-for 内部，以减少性能消耗。
使用 key 优化 v-for：
- 始终为 v-for 中的元素提供唯一的 key，以帮助 Vue 追踪变化并高效地更新 DOM。
对象的遍历顺序：
- 遍历对象时，键的顺序并不保证与对象的声明顺序一致。

总结

本文详细介绍了 Vue 3 中的 v-if、v-show 和 v-for 指令的使用方法、适用场景、常见优化技巧和注意事项。在实际开发中，合理使用这些指令不仅可以提高代码的可读性，还能提升应用性能。掌握这些条件和列表渲染的技巧，可以帮助你更灵活地构建 Vue 应用。

希望本文对你有所帮助，欢迎在评论区留下你的问题与见解！