首页 Vue

# v-for 和 v-if 的优先级

** v-for 和 v-if 一起使用时，vue 会先渲染 v-for 的元素，然后再对渲染出的元素进行 v-if 的判断。** 例如有如下数据结构，我们要将它用 v-for 进行渲染，然后再根据 id 用 v-if 判断 id 是否奇数，然后再决定是否进行显示

data(){
    return {
        human = [
            {
                id:1,
                name:'asuhe'
            },
            {
                id:2,
                name:'sphinx'
            },
            {
                id:3,
                name:'asuka'
            },
            {
                id:4,
                name:'awesome'
            },
        ]  
    }
}

# 情况 1：v-if 判断与 v-for 中的数据有关

<div v-for="item in human" :key="item.id" v-if="item.id%2 === 1">
    
</div>

当我们使用上述方式进行判断时，vue 会将四个 div 全部渲染出来，再进行 v-if 的判断。这就造成了性能损失，进行了一些不必要 div 的渲染和判断

# 解决方案

在这种情况下我们可以使用计算属性，先将符合条件的数据过滤出来，再去使用 v-for 渲染。这样就可以大幅降低性能损耗

computed:{
    person(){
        return this.human.filter(item => item.id%2 === 1 );
    }
}
<div v-for="item in person" :key="item.id">
    
</div>

这样 v-for 就不会渲染不必要的数据

# 情况 2：v-if 判断与 v-for 中的数据无关

若 v-for 的执行是由其它数据判断则，则可以在 v-for 的上层添加一个 v-if 先进行 v-for 的判断。然后再执行 v-for

# 解决方案

data(){
	return{
        isShow:true,
        human = [
            {
                id:1,
                name:'asuhe'
            },
            {
                id:2,
                name:'sphinx'
            },
        ]
    }
}
<div v-if="isShow">
    <div v-for="item in person" :key="item.id">
        
    </div>
</div>