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>
3. 总结
- 在VUE2中，当v-if和v-for同时出现时，v-for的优先级更高
- 所以最好不要同时出现
- 但在VUE3中，当v-if和v-for同时出现时，v-if的优先级更高
