Vue面试题之v-for与v-if为什么不能连用

1,147 阅读2分钟

我们先说出答案,然后再具体进行分析,然后给出具体的解决方案。

答案

  • 在vue中,v-for的优先级比v-if要高。所以vue会先进行遍历,然后再进行条件判断,这样在条件为假的时候会造成不必要的性能浪费。

分析

下面我们看一个例子。

<body>
    <div id='app'>
        <div v-for='item in color' v-if='flag'>
            {{item}}
        </div>
        <u></u>
        <div v-if='flag'>
            <div v-for='item in color' >
                {{item}}
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    color:['red','green','blue','orange','yellow'],
                    flag:false
                }
            },  
        })
    </script>
</body>

打开浏览器开发者工具,看一下最后的html代码:

<div id="app">
  <!---->
  <!---->
  <!---->
  <!---->
  <!----> 
  <u></u>
  <!---->
</div>

通过最后的html代码,我们可以知道第一个v-for与v-if连用的div盒子运行了五次,第二个v-for与v-if没有连用的div盒子只运行了一次。

下面我们分析第一个v-for与v-if连用的div盒子:

  • v-for比v-if优先级高,所以会先进性遍历
  • 然后对每个遍历的结果进行条件判断,如果条件为真,则进行渲染,条件为假,则不进行渲染。

第二个v-for与v-if没有连用的div盒子:

  • 先运行父级盒子,进行条件判断,如果条件为真,则进行渲染,条件为假,则不进行渲染。

这样我们发现v-for与v-if连用会造成性能的浪费(可能五个不明显,但如果上百个甚至更多,这样造成的性能浪费更大),那怎样解决呢?答案就是不连用,不连用的情况也有几种,我们看下一章。

解决方案

已经知道条件的情况下

在已经知道条件的情况下,应该先进行条件判断,再进行循环:

<template v-if='flag'>
    <div v-for='item in arr' >
        {{item}}
    </div>
</template>

使用template表签可以避免生成空的div盒子。

在不知道条件的情况下

在不知道条件判断的情况下,一般是通过循环后的索引或者元素对象来进行判断。

<template v-for='(item,index) in color'v>
    <div v-if='index % 2 == 0'>
        {{item}}
    </div>
</template>

\