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

Vue.js 是一个渐进式的 JavaScript 框架，在构建用户界面时，它提供了强大的模板语法来处理各种常见的 DOM 操作，其中包括条件渲染和列表渲染。这些渲染方式让开发者能够更加灵活地控制界面的展示效果。本文将详细探讨 Vue 3 中的条件渲染与列表渲染，并通过丰富的实例与场景来展示它们的实际应用。

目录

1. 简介
2. 条件渲染
   1. v-if 指令
   2. v-else 和 v-else-if 指令
   3. v-show 指令
   4. 使用计算属性进行条件渲染
   5. 条件渲染的性能对比
   6. 常见场景与应用
3. 列表渲染
   1. v-for 指令
   2. 列表渲染的优化技巧
   3. 使用对象和数组进行列表渲染
   4. 列表渲染的常见应用场景
4. 综合应用示例
5. 总结与最佳实践

简介

在 Vue 3 中，条件渲染和列表渲染是两种非常常用的渲染方式，它们帮助开发者根据不同的条件或数据动态控制视图的显示内容。理解和掌握这两种渲染方式的使用方法及其优化技巧，对于构建高效、动态的应用至关重要。

• 条件渲染：在 Vue 中，条件渲染用于根据表达式的真假来决定某个元素或组件是否渲染。Vue 提供了 v-if、v-show 等指令来实现条件渲染。

• 列表渲染：Vue 的 v-for 指令可以用于根据数据源渲染列表。它能够根据数组、对象等数据源的内容动态渲染对应的 DOM 元素。

本篇文章将详细介绍这两种渲染方式，并通过实际的案例来帮助大家理解如何在日常开发中高效地使用它们。

条件渲染

v-if 指令

v-if 是 Vue 中最常用的条件渲染指令，它基于给定的表达式判断某个元素是否应该被渲染到 DOM 中。如果 v-if 条件为真，则该元素会被渲染；如果为假，则元素将被从 DOM 中移除。

语法

htmlCopy Code
<p v-if="isVisible">这是一个可见的段落</p>

示例 1：基础条件渲染

htmlCopy Code
<template>
  <div>
    <button @click="toggleVisibility">Toggle Visibility</button>
    <p v-if="isVisible">Hello, Vue 3!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    },
  },
};
</script>

在这个例子中，当点击按钮时，isVisible 的值会发生变化，导致 p 标签的显示与否发生切换。

v-if 的优势与注意事项

1. 销毁与重建：与 v-show 不同，v-if 会在条件为假时完全销毁 DOM 元素，并且当条件为真时重新创建。因此，如果元素的切换频繁，可能会带来性能开销。

2. 使用场景：当需要根据复杂的条件来动态控制元素是否渲染时，v-if 是一个不错的选择。

v-else 和 v-else-if 指令

除了 v-if，Vue 还提供了 v-else 和 v-else-if 来实现条件渲染中的多分支判断。

语法

htmlCopy Code
<p v-if="status === 'active'">Active</p>
<p v-else-if="status === 'inactive'">Inactive</p>
<p v-else>Unknown</p>

示例 2：多分支条件渲染

htmlCopy Code
<template>
  <div>
    <button @click="setStatus('active')">Active</button>
    <button @click="setStatus('inactive')">Inactive</button>
    <button @click="setStatus('unknown')">Unknown</button>

    <p v-if="status === 'active'">User is active</p>
    <p v-else-if="status === 'inactive'">User is inactive</p>
    <p v-else>User status is unknown</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'unknown',
    };
  },
  methods: {
    setStatus(status) {
      this.status = status;
    },
  },
};
</script>

在这个示例中，三个按钮控制不同状态的切换，展示了如何通过 v-if、v-else-if 和 v-else 实现多个条件分支的渲染。

v-else 和 v-else-if 使用注意

• v-else 和 v-else-if 必须紧跟在对应的 v-if 或 v-else-if 元素后面，并且不能有其他元素或空格。
• v-else 是 v-if 的补充，通常在一个 v-if 之后使用，用于处理 false 的情况。

v-show 指令

v-show 与 v-if 的作用类似，都能控制元素的显示与否，但有一个显著的区别：v-show 只是通过 CSS 的 display 属性来控制元素的可见性，而 v-if 会直接销毁和重建 DOM 元素。

语法

htmlCopy Code
<p v-show="isVisible">这段文字使用 v-show 渲染</p>

示例 3：使用 v-show 控制显示

htmlCopy Code
<template>
  <div>
    <button @click="toggleVisibility">Toggle Visibility</button>
    <p v-show="isVisible">这是使用 v-show 控制显示的段落</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    },
  },
};
</script>

使用计算属性进行条件渲染

在实际开发中，条件渲染的条件可能较为复杂，往往涉及到多个数据源的判断。在这种情况下，使用计算属性能够简化代码并提高可读性。

示例 4：通过计算属性实现条件渲染

htmlCopy Code
<template>
  <div>
    <p v-if="isUserActive">Welcome, active user!</p>
    <p v-else-if="isUserInactive">Sorry, your account is inactive.</p>
    <p v-else>You are not logged in.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userStatus: 'guest',
    };
  },
  computed: {
    isUserActive() {
      return this.userStatus === 'active';
    },
    isUserInactive() {
      return this.userStatus === 'inactive';
    },
  },
};
</script>

在这个示例中，我们通过计算属性 isUserActive 和 isUserInactive 来判断用户的状态，并据此选择合适的提示信息。

列表渲染

v-for 指令

v-for 是 Vue 中用来渲染列表的指令，它允许根据数组或对象的数据来动态生成相应的 DOM 元素。v-for 支持遍历数组、对象、甚至是数字范围等。

语法

htmlCopy Code
<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

示例 5：基础列表渲染

htmlCopy Code
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Vue.js' },
        { id: 2, name: 'React.js' },
        { id: 3, name: 'Angular' },
      ],
    };
  },
};
</script>

在这个例子中，v-for 用于遍历一个包含对象的数组，渲染出一个列表。我们使用 :key 来