如何优化复杂数据渲染列表的卡顿-2
上一篇我们讨论了如何优化数据渲染卡顿，这里我们来讨论一下如何优化数据渲染卡顿，通常我们可能会想到使用虚拟列表来处理 12345<div class="content-box h-[calc(100%-80px)] overflow-auto overflow-y-auto px-[40px] pb-[80px]"> <router-view v-slot="{ Component }"> <component :key="refresh" :is="Component"></component> </router-view></div> 由于我的router-view...
如何优化复杂数据渲染列表的卡顿-1
最近在写一个模仿网易云音乐软件的项目,在写到音乐列表页面时碰到一个问题,可以看到我的这个音乐列表渲染的数据有点复杂，有个搜索当我在搜索时对数据过滤渲染，当我比如说清除搜索条件或者是删除搜索框最后一个字符时会卡顿一下再将数据加载出来 可以很清楚的看到明显的一个卡顿，那为什么会存在这个问题呢？首先我们先来看一下我最开始如何写的搜索代码 12345678910111213141516171819const filterList = ref<GetMusicDetailData[]>([]) // 搜索音乐const handleSearch = (val) => { if (!val.trim().length) { filterList.value = mylist.value } else { filterList.value = mylist.value.filter((item) => { const alName = item.al?.name || '...
Vue 全局组件注册
在写项目时遇到一个问题，先来看两段代码 1234567891011121314151617181920// search/index.vue<template> <div class="search-container flex items-center px-[15px]"> <el-icon class="search-icon cursor-pointer" size="18px" color="rgba(255, 255, 255, 0.5)"> <Search /> </el-icon> <input class="search-input bg-transparent w-[230px] h-[37px] pl-[10px] outline-none border-none font-size-[14px] text-white...
通过Map处理数据更新
在处理列表新增时遇到一个这个问题，通过组件选中的数据来新增，已经勾选过的组件还是勾上的，带出的数据是选中的数据，这时就有问题你不能简单的通过将选中的数据push到一个数组里面就可以，当用户选了一个数据又再次勾选时，你会有重复数据，当用户取消勾选时你获取到的是空数组，也不能使用直接将选择出来的数组直接替代，如果用户有编辑数据会导致数据丢失影响体验，这个时候就需要使用Map数据结构来进行处理了 1234567891011121314151617181920212223242526272829checkInspection(checkNames, checkData) { // 首先 创建一个Map const existingMap = new Map(); this.checkInspectionList.forEach(item => { if (item.keypointItemId) { // 将列表里面的id为键 将数组进行保存 ...