v-if 和 v-for 为什么不能连用

v-if 和 v-for 不能连用，否则会造成一个性能浪费！
原因： 在 Vue2中 v-for的优先级高于 v-if，如果v-if的值为false时，v-for仍然会根据优先级进行渲染，这样就造成了一个资源浪费，如下所示：

<template>
	<div>
		<!--不能同时使用，会造成资源浪费-->
		<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>

可以将v-if包在最外层来解决：

<template>
	<div>
		<div v-if="flag">
			<div v-for = "(it, i) in getData" v-key="i" ></div>
		</div>
		<!--如果不想使用div标签，也可以使用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>