大量v-if的弊端
在项目中会经常遇到大量业务条件选择的场景,如果大量使用v-if指令,会造成:
- 页面渲染性能下降,加载时间增加:每个v-if都需要进行计算,会导致页面初次渲染的耗时增加,延长页面加载时间
- 冗余代码增加:过多v-if会使template模板代码冗长、难以维护、可读性差、可维护性下降
- 内存增加:每个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>