第77题：v-for 和 v-if 哪个优先级更高？如果同时出现，应如何优化？

[zxdfe]

Vue2 :

在vue2中, 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

Vue3 :

在vue3中，v-if 的优先级高于 v-for

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

上述代码每次渲染都会先执行循 环再判断条件，无论如何循环都不可避免，浪费了性能。

// 相当于
this.list.map((item,index) => {
    if (index === 9) {
    	return item
  	}
})

不建议v-if 和 v-for同时时候，解决方法

1. 在外层嵌套 template，在这一层进行 v-if 判断，然后在内部进行 v-for 循环。

<template v-if="xxx">
 	<div v-for="(item) in list" :key="item" ></div>
 </template>

2. 如果条件出现在循环内部，可以先利用计算属性去生成需要要遍历的数组

<!-- 2. 然后这里去循环已经被过滤的属性 -->
<div  v-for="(item) in ListArr" :key="item" ></div>  

computed:{
    //1.在computed里先做好判断，这里过滤的成本远比v-if的成本低
    ListArr(){
        return this.list.filter((_,index) => index === 9)
    }
  }

1. 为什么v-if和v-for不能同时使用

2. v-for 和 v-if哪个优先级更高

3. v2官方文档

[CDwenhuohuo]

1，v-for优先级要高于v-if
2，如果v-for和v-if同时使用，会造成不必要的Dom操作或性能损耗，列①：v-if和v-for作用于一个元素，v-if的条件判断为false，该元素可能会被删除，导致v-for无法正常工作。列②：v-for已经可以满足渲染的控制可见性的需求，不需要再使用v-if指令，而v-if&&v-for一起使用，每次循环都要重新进行判断计算v-if，并对每个元素进行条件判断哦，所以很浪费性能