优化template中大量条件选择v-if

大量v-if的弊端

在项目中会经常遇到大量业务条件选择的场景，如果大量使用v-if指令，会造成：

1. 页面渲染性能下降，加载时间增加：每个v-if都需要进行计算，会导致页面初次渲染的耗时增加，延长页面加载时间
2. 冗余代码增加：过多v-if会使template模板代码冗长、难以维护、可读性差、可维护性下降
3. 内存增加：每个v-if都会生成对应的DOM元素，并在切换条件时进行创建和销毁，会导致内存占用增加，对性能和资源消耗产生影

解决方案

计算属性

通过计算属性的返回值来控制页面渲染

<template> 
    <div> 
        <span v-if="content">{{ content }}</span> 
    </div> 
</template> 
<script lang="ts" setup> 
import { computed } from 'vue'
const content= computed(() => { 
    if (/* 1 */) { 
        return 'content 1'
    } else if (/* 2 */) { 
        return 'content 2'
    } else { 
        return 'content 3'
    } 
})
</script>

动态异步组件

使用<component :is="component"></component> 动态切换组件

<template>
    <div>
        <component :is="component"></component>
    </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
import ComponentC from './ComponentC.vue'
const currentComponent = computed(() => {
  if (/* 1 */) {
    return ComponentA
  } else if (/* 2 */) {
    return ComponentB
  } else {
    return ComponentC
  }
})
</script>

v-show

频繁切换元素的显示和隐藏时，可以使用v-show代替v-if

<template>
    <div> 
        <span v-show="visible">content</span> 
    </div> 
</template> 
<script lang="ts" setup> 
import { ref } from 'vue'
const visible= ref<boolean>(true) 
</script>