面试官-为什么v-if和v-for不能同时使用

先回怼，v-if和v-for可以同时使用！但是只是建议不要同时用！

原因

v-for的执行优先比v-if要高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。

举个例子

<template>
  <div class="hello">
     <div  v-for="(item,index) in list" v-if="index === 9" :key="item" ></div>
  </div>
</template>

<script>
export default {
  name: "IndexCom",
  data(){
    return {
      list:[1,2,3,4,5,6,7,8,9,10]   //需要遍历的数据
    }
  }
};
</script>

<style scoped>
</style>

等价于

<template>
  <div class="hello">
    <div v-if="0 === 10"></div>   //第1次判断
    <div v-if="1 === 10"></div>   //第2次判断
    <div v-if="2 === 10"></div>   //第3次判断
    <div v-if="3 === 10"></div>   //第4次判断
    <div v-if="4 === 10"></div>   //第5次判断
    <div v-if="5 === 10"></div>   //第6次判断
    <div v-if="6 === 10"></div>   //第7次判断
    <div v-if="7 === 10"></div>   //第8次判断
    <div v-if="8 === 10"></div>   //第9次判断
    <div v-if="9 === 10"></div>   //第10次判断
  </div>
</template>

<script>
export default {
  name: "IndexCom",
  data() {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    };
  },
};
</script>

<style scoped>
</style>

以上面这组list为例子。我们会发现。循环了10次的数据，每一次，都需要进行v-if的判断。循环10次，判断10次，如果需要循环1000次呢，那也需要判断1000次。而v-if的判断相对的比较耗费性能。大量的判断会极大的降低项目质量。

解决方案：

第一种：将 v-if 和 v-for 分别放在不同标签中

<ul v-if="active">
   <li v-for="(item, index) in list" :key="inde">
       <p>{
    
    {item.name}}</p>
   </li>
</ul>

如果 v-if 和 v-for 只能放在同一级标签中，使用计算属性进行改造：

let title = "自定义"
<ul v-for="(item, index) in lists(list, title)" :key="index">
   <li>{
    
    {item.name}}</li>
</ul>

computed: {
    lists () {
      return (item, name) => {
        return item.filter(item => item.name !== name)
      }
    }
}