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的優先級更高