v-if 和v-for相关问题

定义

• v-for是用于循环渲染列表的指令
• v-if是用于条件渲染的指令
• 如果在v-for内部使用v-if，会导致性能问题，因为每次渲染时都会对整个列表进行遍历

优先级

vue2

• 在vue2中，v-for 具有比 v-if 更高的优先级
• 在vue2中应尽量避免二者同时使用，同时使用时编译器会报错
• 一个更好的做法是使用计算属性来过滤和返回你想要在页面上渲染的列表。计算属性可以根据条件动态计算并返回一个新的数组，这样可以避免在每次渲染时遍历整个列表

<template>  
  <div>  
    <ul>  
      <!-- 使用计算属性来过滤列表 -->  
      <li v-for="item in filteredList" :key="item.id">  
        {{ item.name }}  
      </li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      list: [  
        { id: 1, name: 'Item 1', isVisible: true },  
        { id: 2, name: 'Item 2', isVisible: false },  
        { id: 3, name: 'Item 3', isVisible: true },  
        // 其他列表项...  
      ]  
    };  
  },  
  computed: {  
    filteredList() {  
      // 返回过滤后的列表，只包含isVisible为true的项  
      return this.list.filter(item => item.isVisible);  
    }  
  }  
};  
</script>

Vue3

• 在Vue3官方文档中，不推荐同时使用 v-if 和 v-for ，因为这样二者的优先级不明显
• 当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。

• 可以在外新包装一层 <template> 在其上使用 v-for 解决这个问题 (这也更加明显易读)

-----------------------------------------------------------------------2024.6.4每日一题