liveh5-nuxt/app/components/AppFooter.vue
xingyy 2d909b276b perf(components): 添加 v-memo指令以优化性能
- 在 AppFooter 组件中,为最外层 div 添加 v-memo="[active]" 指令- 在 AppHeader 组件中,为 VanNavBar 组件添加 v-memo="[title, fullLive, showLeftArrow, subTitle]" 指令
- 移除了 AppHeader 组件中的 console.log 语句
2025-01-23 15:28:31 +08:00

38 lines
1011 B
Vue

<script setup>
import { useAppFooterRouteNames as names } from '@/config/index.js'
import MyIcon from "@/components/icons/MyIcon.vue";
import HomeIcon from "@/components/icons/HomeIcon.vue";
const route = useRoute()
const active = ref(0)
const show = computed(() => {
if (route.name && names.includes(route.name))
return true
return false
})
const initData=()=>{
active.value=route.path==='/profile'?1:0
}
onMounted(()=>{
initData()
})
</script>
<template>
<div v-if="show" v-memo="[active]" >
<van-tabbar v-model="active" route placeholder fixed>
<van-tabbar-item replace to="/">
<span>{{ $t('tabbar.home') }}</span>
<template #icon>
<HomeIcon :active="active===0"></HomeIcon>
</template>
</van-tabbar-item>
<van-tabbar-item replace to="/profile">
<span>{{ $t('tabbar.profile') }}</span>
<template #icon>
<MyIcon :active="active===1"></MyIcon>
</template>
</van-tabbar-item>
</van-tabbar>
</div>
</template>