v-for 和 v-if的用法及优先级

我胡为喜呀

已于 2023-12-30 14:03:54 修改

阅读量1.5k

点赞数 26

文章标签： vue.js javascript ecmascript

于 2023-12-30 13:31:08 首次发布

本文链接：https://blog.csdn.net/xu1912715645/article/details/135304296

版权

文章目录

在 Vue 中，有两个常用的指令，即 v-for 和 v-if，它们分别用于循环渲染和条件渲染。我简单记录下它们的用法、使用场景、注意事项以及优先级对比。

v-for：循环渲染

v-for 是 Vue 中用于循环渲染的指令，它允许我们遍历数组或对象，并为每个元素执行相同的操作。举一个简单的例子：

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

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

在上面例子中，v-for 循环遍历 items 数组，为每个数组元素生成一个 div元素。在使用 v-for 渲染列表时，我们通常需要注意为每个子元素添加唯一的 key 属性。

1、key 的作用

唯一性标识：key 用于标识每个循环元素的唯一性，确保每个元素都有一个独特的标识。
提高性能：在列表数据变动时，Vue 通过 key 可以精准地判断哪些元素被添加、删除或被移动，而不是简单地全部销毁重建，从而提高页面的渲染效率。

key 主要用于优化页面的渲染性能。当 Vue 重新渲染列表时，它会尽量复用已经存在的元素，而不是从头开始重新创建。key 的作用就是帮助 Vue 识别每个列表中的元素，确保在重新渲染时能够正确地定位、更新或删除已存在的元素。

2、为什么不推荐使用索引作为 key？

在某些情况下，很多人可能会考虑使用循环的索引作为 key，但这并不是一个推荐的做法。原因如下：

不稳定性：数组的元素顺序可能会变动，如果使用索引作为 key，在列表中插入或删除元素可能导致相邻元素的 key 发生变化，从而影响 Vue 的渲染优化效果。
不唯一性：当列表中的元素有可能相同时，使用索引作为 key 会导致相同的 key 值，使得 Vue 难以区分它们。

3、使用key的注意事项：

使用唯一标识作为 key：确保每个元素都有一个唯一的标识符，例如数据库中的 ID。

<div v-for="item in items" :key="item.id">
  <!-- 元素内容 -->
</div>

避免使用索引作为 key：尽量避免使用数组索引作为 key，除非你确定该列表是静态的，不会发生元素的插入或删除。
谨慎使用动态生成的 key：避免在 key 中使用动态生成的值，因为这可能导致不稳定性，应尽量确保 key 是静态的或由唯一的标识符生成。

v-if：条件渲染

v-if 是 Vue 中用于条件渲染的指令，它根据表达式的真假来决定是否渲染特定的内容。举一个简单的例子：

<template>
  <div>
    <div v-if="isConditionMet">
      Content to render when condition is true.
    </div>
    <div v-else>
      Content to render when condition is false.
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isConditionMet: true
    };
  }
};
</script>

在上面的例子中，v-if 根据 isConditionMet 的值来决定是否渲染相应的内容。当条件为真时，第一个div将被渲染，否则将渲染第二个div。

v-for 与 v-if 的用法

在某些情况下，我们可能需要同时使用 v-for 和 v-if。在同一元素上同时使用这两个指令时，需要注意它们的用法和优先级。

<template>
  <div>
    <div v-for="item in items" :key="item.id" v-if="item.isActive">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1', isActive: true },
        { id: 2, name: 'Item 2', isActive: false },
        { id: 3, name: 'Item 3', isActive: true }
      ]
    };
  }
};
</script>