Why can't V-IF and V-for be used together

v-if and v-for It can't be used together , Otherwise, it will cause a waste of performance ！
reason ： stay Vue2 in v-for Has a higher priority than v-if, If v-if The value of is false when ,v-for Still render according to priority , This creates a waste of resources , As shown below ：

<template>
	<div>
		<!-- Can't be used at the same time , Waste of resources -->
		<div v-for = "(it, i) in getData" v-key="i" v-if="flag">
	</div>
</tempalte>
<script> export default {
       data(){
       return{
       getData:[1,2,3], flag: false } } } </script>

Can be v-if Package in the outermost layer to solve ：

<template>
	<div>
		<div v-if="flag">
			<div v-for = "(it, i) in getData" v-key="i" ></div>
		</div>
		<!-- If you don't want to use it div label , You can also use template-->
		<template v-if="flag">
			<div v-for = "(it, i) in getData" v-key="i" ></div>
		</template>
	</div>
</tempalte>
<script> export default {
       data(){
       return{
       getData:[1,2,3], flag: false } } } </script>