searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

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

2023-10-16 03:24:04
34
0

大量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>
0条评论
0 / 1000
w****n
17文章数
1粉丝数
w****n
17 文章 | 1 粉丝
原创

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

2023-10-16 03:24:04
34
0

大量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>
文章来自个人专栏
Vue前端开发
17 文章 | 1 订阅
0条评论
0 / 1000
请输入你的评论
0
0