v-for和v-if不要一起使用的原因

思忆小调

于 2019-01-02 18:05:08 发布

阅读量7.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue基础

本文链接：https://blog.youkuaiyun.com/qq_38985463/article/details/85629473

vue基础专栏收录该内容

2 篇文章

订阅专栏

探讨Vue中v-if与v-for指令的执行优先级及其对性能的影响，介绍如何使用计算属性优化列表渲染过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-for的优先级比v-if高

所以当：

<ul>

<li v-for="user in users" v-if="user.isActive">

{{user.id}}

</li>

</ul>

时，代码的执行顺序会是

this.users.map(function(user)){

    if(user.isActive){

        return user.id

    }

}

因此哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。会影响性能

所以，我们可以把把上面的改为计算属性：

computed：{

    activeClass:function(){

        this.users.filter(function(user)){

            return user.isActive

        }

    }

}

<ul>


<li v-for="user in activeClass" :key="user.id">

{{user.id}}

</li>

</ul>