vue3+vant4 二次封装IndexBar城市列表组件以及性能优化

前言

二次封装城市列表以及对静态资源的引入做异步引入优化。
版本号: vue3.3 + vant4

效果图

在这里插入图片描述

数据源

城市列表 city.json 永久网盘链接
链接:https://pan.baidu.com/s/10E-b441-4P7mjvomlJhm0g
提取码:m92c

字段大致讲解
indexList :每个字母是所属城市外层盒子唯一的key。
van-index-anchor: 是页面的每个标题,例如A、B。
van-cell:title就是A下面的每个城市
进来先用computed把城市数据源中的首个字母取出来。数据源长这个样子
在这里插入图片描述

性能优化点

此组件做了一处优化
city.json 同步引入改为异步引入。
作用:引入的数据量较大时 页面无需因为它而加载不出来,同步的还是照样展示,数据量大的让其加入到异步队列即可,因为我们都知道,同步永远比异步优先执行。
效果:如此可达到快速加载页面、丝毫不影响用户体验,还是挺不错的。

优化前效果图

进入的时候明显要等几秒钟,因为引入方式是同步的,同步需要页面完全加载完才会展示,这是同步引入的弊端。
在这里插入图片描述

优化前代码

<script lang="ts" setup>
import { ref, computed, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { city } from '@/assets/json/city.json' // 同步导入 JSON 数据const router = useRouter()
const cityData = city
// const indexList = ['A', 'B', 'C']
//获取所有城市首字母
const indexList = computed(() => {return cityData.map(item => item.initial)
})
</script>
优化后效果

立马就进入,依旧优先加载同步,但是city.json改为异步了,已加入异步队列,所以永远在同步后面才执行。
在这里插入图片描述

优化后代码

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
const cityData = ref([])// const indexList = ['A', 'B', 'C']
//获取所有城市首字母
const indexList = computed(() => {return cityData.value.map(item => item.initial)
})// 异步加载城市数据 性能优化
async function loadCities() {try {const data = await import('@/assets/json/city.json') // 动态导入 JSON 数据cityData.value = data.city // 更新 cities 的值// console.log(cityData, 'cityData.value')} catch (error) {console.error('Failed to load cities:', error)}
}// 在组件挂载后加载数据
onMounted(() => {loadCities()
})
</script>

完整源码

City.vue 子组件

<script lang="ts">
export default {name: 'CityList',
}
</script>
<script lang="ts" setup>
import { ref, computed, onMounted, } from 'vue'
import { useRouter } from 'vue-router'const router = useRouter()
const cityData = ref([])// const indexList = ['A', 'B', 'C']
//获取所有城市首字母
const indexList = computed(() => {return cityData.value.map(item => item.initial)
})// 选择城市回首页
const backHome = cityname => {// router.push({ path: '/', query: { cityname: cityname + '市' } })console.log(cityname + '市', '选中的城市')
}
// 异步加载城市数据 性能优化
async function loadCities() {try {const data = await import('@/assets/json/city.json') // 动态导入 JSON 数据cityData.value = data.city // 更新 cities 的值// console.log(cityData.value, 'cityData.value')} catch (error) {console.error('Failed to load cities:', error)}
}// 在组件挂载后加载数据
onMounted(() => {loadCities()
})
</script>
<template><div class="city-list-container"><div class="hotcity">所有城市</div><van-index-bar :index-list="indexList" highlight-color="#1989fa"><div v-for="(city, idx1) in cityData" :key="idx1"><van-index-anchor :index="city.initial"></van-index-anchor><van-cell v-for="(item, idx2) in city.list" :key="idx2" :title="item.name" @click="backHome(item.name)"></van-cell></div></van-index-bar></div>
</template>
<style scoped lang="scss">
.hotcity {padding: 30px;font-size: 28px;font-weight: bold;
}
::v-deep(.van-index-bar) {background-color: #fff;
}
::v-deep(.van-index-bar__sidebar) {top: 72%;
}
</style>

如何使用

以SearchList.vue 父组件为例

<template><div><CityList /></div>
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/21566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开窗函数!

开窗函数&#xff08;Window Function&#xff09;是SQL中的一种高级功能&#xff0c;允许你在一组相关行&#xff08;一个“窗口”&#xff09;上执行聚合操作&#xff0c;而不像传统聚合函数&#xff08;如SUM(), AVG(), COUNT()&#xff09;那样将所有匹配行合并成单个汇总行…

大数据的数据采集

大数据采集是指从各种来源收集大量数据的过程&#xff0c;这些数据通常是结构化或非结构化的&#xff0c;并且可能来自不同的平台、设备或应用程序。大数据采集是大数据分析和处理的第一步&#xff0c;对于企业决策、市场分析、产品改进等方面具有重要意义。以下是大数据采集的…

Vue3项目炫酷实战,检测密码强度值

在前端项目开发中&#xff0c;确保用户密码的强度是保护账户安全的重要措施。本文将演示如何使用Vue 3实现一个简单的密码强度检测功能。通过实时反馈&#xff0c;帮助用户创建更安全的密码&#xff0c;从而提升整体系统的安全性。无论您是前端开发新手还是经验丰富的开发者&am…

与5月汽车销量共舞:MK米客方德SD NAND助力车载T-box

上周末&#xff0c;各家车企集体公布5月销量数据&#xff0c;新能源车龙头比亚迪单月销量遥遥领先&#xff0c;数据显示&#xff0c;比亚迪5月新能源汽车销量33.18万辆&#xff0c;上年同期销量24.02万辆。1至5月&#xff0c;比亚迪新能源汽车销量累计127.13万辆&#xff0c;同…

重生之 SpringBoot3 入门保姆级学习(17、整合SSM)

重生之 SpringBoot3 入门保姆级学习&#xff08;17、整合SSM&#xff09; 4、数据访问4.1 整合 ssm 4、数据访问 4.1 整合 ssm pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" …

指针的认识(指针变量类型意义、指针运算)

目录 一、指针变量类型的意义 a.通过指针的解引用理解类型意义 b.void* 类型指针 c.const修饰的指针变量 c.1 const放在*号左边​编辑 c.2 const放在*号右边 二、指针运算 a.指针-整数 ​编辑 b.指针 - 指针 ​编辑 c.指针的关系运算 一、指针变量类型的意义 指针变…

【学习】软件测试中如何进行Web网页兼容性测试

在数字时代&#xff0c;Web网页作为信息传递和交流的重要平台&#xff0c;其稳定性和用户体验至关重要。如同一位匠人细致打磨他的工艺品&#xff0c;开发者亦需精心测试网页的兼容性&#xff0c;确保其在各种设备和浏览器上的表现无懈可击。今天&#xff0c;我们就来探讨如何对…

SpringBoot+百度地图+Mysql实现中国地图可视化

通过SpringBoot百度地图Mysql实现中国地图可视化 一、申请百度地图的ak值 进入百度开发者平台 编辑以下内容 然后申请成功 二、Springboot写一个接口 确保数据库里有数据 文件目录如下 1、配置application.properties文件 #访问端口号 server.port9090 # 数据库连接信息 spr…

如何高效管理自己的时间,可以从这几个方向着手

如果你是上班族&#xff0c;天选打工人&#xff0c;你的绝大多数时间都属于老板&#xff0c;能够自己支配的时间其实并不多&#xff0c;所以你可能察觉不到时间管理的重要性。 但如果你是自由职业者或者创业者&#xff0c;想要做出点成绩&#xff0c;那你就需要做好时间管理&am…

NVIDIA发布重磅AI创新,黄仁勋在COMPUTEX大会预示计算未来

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Facebook开户|Facebook广告投放指南

家人们中午好~今天的文章由我们帅气逼人的大帅哥Zoey为大家分享&#xff08;狗头&#xff09;~有想要通过Facebook广告掘金的家人们&#xff01;今天就跟大家分享一下Facebook广告投放的底层逻辑和实用技巧&#xff0c;帮助大家少走弯路&#xff0c;快速入门~ 基础知识&#x…

韶关学院携手泰迪智能科技“见习研学”活动圆满结束

为进一步深化校企合作&#xff0c;落实高校应用型人才培养。5月31日&#xff0c;韶关学院与广东泰迪智能科技股份有限公司联合开展学生企业见习活动。专业教师林思思以及来自韶关学院140名学生参与此次见习活动&#xff0c;泰迪智能科技培训业务部经理钟秋平、校企合作经理吴桂…

Spring异步任务@Async的默认线程池执行器是如何初始化的

Spring异步任务Async的默认线程池执行器&#xff0c;是从哪里来&#xff1f;是如何初始化的&#xff1f; 结论先行 异步任务Async的默认线程池执行器是通过TaskExecutionAutoConfiguration#applicationTaskExecutor自动注入的。 异步任务的线程池执行器是如何初始化的&#…

【Java数据结构】详解Stack与Queue(二)

&#x1f512;文章目录: 1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; 2.栈的应用场景 2.1逆序打印链表 2.2逆波兰表达式求值 2.3括号匹配 2.4出栈入栈次序匹配 2.5最小栈 3. 栈 虚拟机栈 栈帧的区别 4.总结 1.❤️❤️前言~&#x1f973…

零基础构建基于LangChain的聊天机器人(6)

之前的文章&#xff1a; 零基础构建基于LangChain的聊天机器人(1)零基础构建基于LangChain的聊天机器人(2)零基础构建基于LangChain的聊天机器人(3)零基础构建基于LangChain的聊天机器人(4)零基础构建基于LangChain的聊天机器人(5) 设计聊天机器人 现在已经了解了业务需求、数…

python-画矩形

题目描述 根据输入的四个参数&#xff1a;a,b,c,f 参数&#xff0c;画出对应的矩形。 前两个参数a,b 为整数&#xff0c;依次代表矩形的高和宽&#xff1b; 第三个参数c 是一个字符&#xff0c;表示用来填充的矩形符号&#xff1b; 第四个参数f 为整数&#xff0c;0 代表空心&a…

Kotlin Jetpack Paging3 和Flow结合使用注意点

本文首发于公众号“AntDream”&#xff0c;欢迎微信搜索“AntDream”或扫描文章底部二维码关注&#xff0c;和我一起每天进步一点点 在用DataBinding时要注意DataBinding访问的是静态方法 在kotlin中就要用companion object和JvmStatic class ImageViewBindingAdapter {//里面…

MySQl基础入门⑬.5

创建多表连接查询 表准备 CREATE TABLE 员工信息 (员工号 INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,姓名 VARCHAR(50) NOT NULL,性别 ENUM(男, 女) NOT NULL,出生日期 DATE NOT NULL,部门 VARCHAR(50) NOT NULL,手机号码 VARCHAR(20) NOT NULL,-- 根据数据库不同&#x…

NVIDIA NIM推理微服务集成6款新模型

NIM(NVIDIA Inference Microservice)最新模型实例 得益于不断涌现的突破性基础模型&#xff0c;生成式 AI 正在彻底改变各行各业的几乎所有用例。这些模型能够理解背景和原因&#xff0c;从而生成高质量的内容和高精度答案。 NVIDIA 不断优化和发布新的模型。本文将为您介绍最…

ctfshow-web入门-爆破(web25)及php_mt_seed工具的安装与使用

爆个&#x1f528;&#xff0c;不爆了 hexdec() 函数用于将十六进制字符串转换为十进制数&#xff1b; 注意&#xff1a; 我最开始做这道题时看错了&#xff0c;误以为随机数的种子直接来自于 flag 的前八位&#xff0c;以为就是 ctfshow{ 这八个字符然后 md5 加密再截取&a…