前言

vue常用的指令有v-if和v-for，当我们想同时使用的话（官方不推荐），那么会产生一个优先级的问题，我们该如何解决咧？

vue2中，v-for比v-if优先级高
vue3中，v-if比v-for优先级高

作用

v-if

用于条件渲染，控制元素是否显示，当指令为真时，该元素将渲染到dom中，反之，移除

<div v-if="show">{{ message }}</div>

v-for

用于对数据循环渲染

<template>
    <ul> 
        <li v-for="item in items">{{ item }}</li> 
    </ul>
</template>


<script>
    new Vue({ 
        el: '#app', 
        data() { 
            return { 
                items: ['dog', 'cat', 'pig'] 
             } 
         } 
    })
</script>

优先级

vue2

 <ul> <li v-for="item in items" v-if="showList">{{ item }}</li> </ul>

在上述例子中，在渲染列表时，v-for 指令可能会遍历的元素过多，导致页面渲染时间过长，影响用户体验。特别是在数据量较大，或者数据更新频繁的情况下，这个问题会更加明显。其次，在 v-if 和 v-for 指令同时使用时，会存在多重循环嵌套的问题，这会影响代码的可读性和维护性。那么我们如何解决这个问题呢
应该把v-if放在v-for外面，减少循环遍历次数，提高代码开发效率和代码质量

<template v-if="showList">
    <ul> <li v-for="item in items">{{ item }}</li> </ul> 
</template>

vue3

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

在上述例子中，仅当item.show为真时才会出现，需要注意的是，在实际应用中，如果 v-for 和 v-if 同时出现时，它们的优先级关系会影响到列表的渲染效率和性能。

总结

综上所述，不管是vue2还是vue3，不管哪个优先级高都应该尽量减少在同一元素上同时使用 v-for 和 v-if，优化列表渲染时的性能。

v-if和v-for优先级

前言

作用

v-if

v-for

优先级

vue2

vue3

总结