v-if 和 v-for

优先级

可以稍微试一下, 会发现一起用会报错.

<script lang="ts" setup>
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]
</script>

<template>
  <div
    class="h-full w-full"
    @my-test-event="handler"
  >
    <div
      v-for="item in arr"
      v-if="item.id === 1"
    >
      {{ item.id }}
    </div>
  </div>
</template>

会报错Cannot read properties of undefined (reading 'id'), 这是因为v-if的优先级更高, 实际的执行顺序应该是先判断v-if, 再去执行v-for. 因此, 判断v-if时item是undefined.

v-show的优先级没v-for高, 因此没有报错, 并且正确地显示了1, 其他的没有显示.

不过即使这样, 可读性也不高, 应该再套一层.

<script lang="ts" setup>
const arr = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]
</script>

<template>
  <div
    class="h-full w-full"
    @my-test-event="handler"
  >
    <div
      v-for="item in arr"
      :key="item.id"
    >
      <!-- 或者v-show -->
      <template v-if="item.id === 1">
        {{ item.id }}
      </template>
    </div>
  </div>
</template>

但是更好的办法是使用computed来过滤数组.