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 同步引入改为异步引入。
作用：引入的数据量较大时 页面无需因为它而加载不出来，同步的还是还是展示，数据量大的让其参加到异步队列即可，因为我们都知道，同步永远比异步优先执行。
效果：云云可达到快速加载页面、丝毫不影响用户体验，还是挺不错的。
优化前效果图

进入的时间显着要等几秒钟，因为引入方式是同步的，同步需要页面完全加载完才会展示，这是同步引入的弊端。

优化前代码

1. <script lang="ts" setup>
2. import { ref, computed, onMounted} from 'vue'
3. import { useRouter } from 'vue-router'
4. import { city } from '@/assets/json/city.json' // 同步导入 JSON 数据
6. const router = useRouter()
7. const cityData = city
8. // const indexList = ['A', 'B', 'C']
9. //获取所有城市首字母
10. const indexList = computed(() => {
11.         return cityData.map(item => item.initial)
12. })
13. </script>

复制代码

优化后效果

立马就进入，依旧优先加载同步，但是city.json改为异步了，已参加异步队列，所以永远在同步背面才执行。

优化子女码

1. <script lang="ts" setup>
2. import { ref, computed, onMounted } from 'vue'
3. const cityData = ref([])
5. // const indexList = ['A', 'B', 'C']
6. //获取所有城市首字母
7. const indexList = computed(() => {
8.         return cityData.value.map(item => item.initial)
9. })
11. // 异步加载城市数据 性能优化
12. async function loadCities() {
13.         try {
14.                 const data = await import('@/assets/json/city.json') // 动态导入 JSON 数据
15.                 cityData.value = data.city // 更新 cities 的值
16.                 // console.log(cityData, 'cityData.value')
17.         } catch (error) {
18.                 console.error('Failed to load cities:', error)
19.         }
20. }
22. // 在组件挂载后加载数据
23. onMounted(() => {
24.         loadCities()
25. })
26. </script>

复制代码

完备源码

City.vue 子组件

1. <script lang="ts">
2. export default {
3.         name: 'CityList',
4. }
5. </script>
6. <script lang="ts" setup>
7. import { ref, computed, onMounted, } from 'vue'
8. import { useRouter } from 'vue-router'
10. const router = useRouter()
11. const cityData = ref([])
13. // const indexList = ['A', 'B', 'C']
14. //获取所有城市首字母
15. const indexList = computed(() => {
16.         return cityData.value.map(item => item.initial)
17. })
19. // 选择城市回首页
20. const backHome = cityname => {
21.         // router.push({ path: '/', query: { cityname: cityname + '市' } })
22.         console.log(cityname + '市', '选中的城市')
23. }
24. // 异步加载城市数据 性能优化
25. async function loadCities() {
26.         try {
27.                 const data = await import('@/assets/json/city.json') // 动态导入 JSON 数据
28.                 cityData.value = data.city // 更新 cities 的值
29.                 // console.log(cityData.value, 'cityData.value')
30.         } catch (error) {
31.                 console.error('Failed to load cities:', error)
32.         }
33. }
35. // 在组件挂载后加载数据
36. onMounted(() => {
37.         loadCities()
38. })
39. </script>
40. <template>
41.         <div class="city-list-container">
42.                 <div class="hotcity">所有城市</div>
43.                 <van-index-bar :index-list="indexList" highlight-color="#1989fa">
44.                         <div v-for="(city, idx1) in cityData" :key="idx1">
45.                                 <van-index-anchor :index="city.initial"></van-index-anchor>
46.                                 <van-cell v-for="(item, idx2) in city.list" :key="idx2" :title="item.name" @click="backHome(item.name)"></van-cell>
47.                         </div>
48.                 </van-index-bar>
49.         </div>
50. </template>
51. <style scoped lang="scss">
52. .hotcity {
53.         padding: 30px;
54.         font-size: 28px;
55.         font-weight: bold;
56. }
57. ::v-deep(.van-index-bar) {
58.         background-color: #fff;
59. }
60. ::v-deep(.van-index-bar__sidebar) {
61.         top: 72%;
62. }
63. </style>

复制代码

怎样利用

以SearchList.vue 父组件为例

1. <template>
2.         <div>
3.                 <CityList />
4.         </div>
5. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。