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">
    {{item.name}}
</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">
    {{item.name}}
</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">
        {{item.name}}
    </div>
</div>