Vue面试题02：v-if与v-for的优先级相关

v-if与v-for优先级问题

• 官方不推荐两者同时使用；

• vue2中v-for优先级高于v-if：

  • 可以借助这种优先级机制渲染部分列表项，但这样v-if将分别重复运行于每个v-for循环中，造成一定程度的性能和资源浪费，建议使用一个返回过滤后列表的computed取而代之：

    <!-- 不建议使用 -->
    <li v-for="(item, index) in list" :key="index" v-if="item.isActive">
      {{ item.msg }}
    </li>
    
    <!-- 计算属性返回列表 -->
    <li v-for="(item, index) in filteredList" :key="index">
      {{ item.msg }}
    </li>
    computed: {
      filteredList() {
        return this.list.filter(item => item.isActive)
      }
    }
    

• vue3中v-if优先级高于v-for：

  • 这时再把他们放在一起渲染部分列表项，由于v-if先执行会访问不到列表元素而报错；可以将v-for提到外层放到template容器上或者使用计算属性解决问题：

  • tips：vue2也可以外提v-for到template标签，只不过vue2中template标签不支持绑定key，需要将key绑定至真实的循环元素上，vue3则需要将key绑定到循环的template容器上;

    <!-- 报错 -->
    <ul>
      <li v-for="(item,index) in list" :key="index" v-if="item.isActive">{{item.msg}}</li>
    </ul>
    
    <!-- 外提v-for到template标签 -->
    <ul>
      <template v-for="(item, index) in list" :key="index">
        <li v-if="item.isActive">
          {{ item.msg }}
        </li>
      </template>
    </ul>