vue2-v-if和v-for的优先级

vue2-v-if和v-for的优先级

1.v-if和v-for的作用

• v-if是条件渲染，只有条件表达式true的情况下，才会渲染
• v-for是基于一个数组来渲染一个列表，在v-for的时候，保证给每个元素添加独一无二的key值，便于diff算法进行优化

<div v-if="ifShow"></div>
<p v-for="item in items" :key="item.id">{{item}}</p>

2. 优先级

• 优先级是为了讨论先执行v-for还是先执行v-if
• 那就有两种情况，v-if和v-for在同一个元素上和不同的元素上

2.1 同一个元素上的v-if和 v-for的优先级

<div v-if="isShow" v-for="item in items" :key="item.id">{{ item.name}}</div>
<script>
  const app=new Vue({
    el:'#app',
    data(){
        return{
            items:[
              {id:1,name:'tom'},
              {id:2,name:'tony'}
            ]
        }
    },
    computed:{
        ifShow(){
            return this.items && this.items.length>0
        }
    }
  })
</script>

• 这种情况下v-for的优先级高于v-if，也就是先执行v-for，在执行v-if.这种情况下就会造成性能的浪费

2.1 不同标签上的v-if和v-for

<div v-if="ifShow">
  <p  v-for="item in items" :key="item.id">{{ item.name}}</p>
</div>

• 这种情况下v-if优先级高于v-for

3. 总结

• 在VUE2中，当v-if和v-for同时出现时，v-for的优先级更高
• 所以最好不要同时出现
• 但在VUE3中，当v-if和v-for同时出现时，v-if的优先级更高