为啥v-if和v-for不建议同时使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为啥v-if和v-for不建议同时使用相关的知识,希望对你有一定的参考价值。

参考技术A

在官方文档中明确指出v-for和v-if不建议一起使用。

原因 :v-for比v-if优先级高,每一次都需要遍历整个数组,造成不必要的计算,影响性能,即使100个list中只需要使用一个数据,也会循环整个数组。

解决 :使用computed

为什么v-if和v-for不建议用在同一标签

 如下列代码:

<div v-for="item in [1, 2, 3]" v-if="item == 1">
    item
</div>

v-for的优先级比v-if高,所以会先循环出来,然后再进行item每个 v-if判断。这样就无用的多渲染好多次dom。

解决办法:

用computed写法代替

<div v-for="item in list">
    item
</div>

computed() 
    list() 
        return [1, 2, 3].filter(item => item == 1)
    
  

以上是关于为啥v-if和v-for不建议同时使用的主要内容,如果未能解决你的问题,请参考以下文章

v-if和v-for为啥避免一起用

Vue.js v-for中能不能嵌套使用v-if

为什么v-if和v-for不建议用在同一标签

v-for和v-if不能同时使用

v-if和v-for谁的优先级高?如何同时使用?

饿了么组件--table组件自定义渲染列,同时伴有v-for和v-if情况