• 如何优化Vue template 中的大量条件选择v-if

    大量v-if的弊端

    在实际项目中，通常会遇到存在大量的业务条件选择的场景，这种情况下如果使用大量的"v-if"和"v-else"指令，会造成

    1、页面渲染性能下降，加载时间增加： 每个v-if 都需要遍历并计算这些条件，尤其是在条件选择复杂且计算开销较大时，会导致初始渲染的耗时增加，从而延长页面的加载时间。

    2、冗余代码增加：过多的v-if 会导致模板代码变得冗长和难以维护。导致代码可读性降低，难以理解和调试。

    3、可维护下降：当模板中存在大量的v-if时，由于每个条件判断都是独立的，修改其中一个条件可能需要修改多个地方，增加了出错的可能性，并使维护变得复杂。

    4、内存增加： 每个v-if条件都会生成对应的DOM元素，并在切换条件时进行创建和销毁，当模板中存在大量的v-if时，会导致内存占用增加，对性能和资源消耗产生影响。

    可选的优化方案

    利用计算属性

    将复杂的条件逻辑转移到计算属性中处理，避免在template模板中频繁使用"v-if"和"v-else"。通过计算属性的返回值来控制渲染的内容, 这样使得template代码更简洁，条件处理的逻辑更清晰且更易维护。

    <template> 
    <div> 
        <span v-if="displayText">{{ displayText }}span> 
    div> 
 template> 
 <script> 
     export default { 
         data() { 
             return { 
                 // ... 
              }; 
         }, 
         computed: { 
             displayText() { 
                 // 在此处添加复杂的条件逻辑 
                     if (/* condition */) { 
                        return 'Text 1'; 
                      } else if (/* another condition */) { 
                        return 'Text 2'; 
                      } else { 
                        return 'Default Text'; 
                       } 
               }, 
         },
     }; 
 script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    使用异步动态组件（Dynamic components)

    如果根据条件渲染不同的组件，可以使用  动态切换组件。

    这种优化方式结合了工厂模式的使用，在工厂组件中注册所有的component组件，根据传入的 condition 知道具体生产哪个component，并使用 :is 进行页面渲染。

    <template> 
    <div> 
        <component :is="currentComponent">component> 
    div> 
template> 
<script> 
    import ComponentA from './ComponentA.vue'; 
    import ComponentB from './ComponentB.vue'; 
    import ComponentC from './ComponentC.vue'; 
    export default { 
        data() { 
            return { 
                // ... 
             }; 
         }, 
         computed: { 
             currentComponent() { 
                // 在此处添加复杂的条件逻辑 
                if (/* condition */) { 
                     return ComponentA; 
                 } else if (/* another condition */) { 
                     return ComponentB; 
                 } else { 
                     return ComponentC; 
                 } 
             }, 
        }, 
        components: { 
            ComponentA, 
            ComponentB, 
            ComponentC, 
         }, 
    }; 
  script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    使用v-show代替v-if

    当需要频繁切换元素的显示和隐藏时，可以使用v-show替代v-if。因为v-show仅会改变元素的 CSS display属性，避免了DOM元素频繁切换显示和隐藏，而v-if会将元素从 DOM 中完全移除或重新插入，但是v-show不支持