v-for/v-if使用时的注意点

v-for: 可以循环渲染数组数据，它的语法是：v-for="item in items"，其中item是每个数组元素，items是数组本身。

v-if: 可以根据一个条件动态渲染或不渲染某个元素，它的语法是：v-if="isShow"，其中isShow是一个布尔值，表示是否渲染该元素。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{
   
   {item.text}}</li>
    </ul>
    <p v-if="isShow">This is a conditionally rendered element</p>
  </div>
</template>

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

v-for和v-if不要放到一个元素上

因为v-for的优先级比v-if高，如果放在一起用，也是先执行循环渲染一遍，之后在去v-if判断

这样就存在性能问题。

例如，在下面的代码中，在每个 li 元素上同时使用 v-for 和 v-if：

<ul>
  <li v-for="item in items" v-if="item.isActive">
    {
    
    {
    
     item.name }}
  </li>
</ul>

这样的写法会导致每个 li 元素都需要进行判断和循环，可能会增加处理量，降低性能。

注：

如果条件出现在循环内部，可以先使用computed计算属性进行一次过滤

当在循环中出现条件时，使用计算属性进行一次过滤是一种有效的方法来缓解问题。这是因为计算属性是在数据改变时自动更新的，而不是在每次渲染时都重新计算。

例如，如果您在循环中使用v-if来控制显示某些元素，则每次渲染时都会重新计算该条件。与此相反，如果您使用计算属性进行过滤，则只有当数据改变时才会重新计算。

示例代码：

// Template
<template>
  <ul>
    <li v-for="item in filteredItems">{
   
   { item.name }}</li>
  </ul>
</template>

// JavaScript
data() {
    
    
    return {
    
    
        items: [
        {
    
     name: 'Item 1', show: true },
        {
    
     name: 'Item 2', show: false },
        {
    
     name: 'Item 3', show: true }
        ]
    }
},
    computed: {
    
    
        filteredItems() {
    
    
        	return this.items.filter(item => item.show)
        }
}