vue数据太多导致页面卡顿解决办法_无知的飞鸟的博客

解决办法：

1.和后端沟通进行页面分页加载（本次需求列数过多，不适用）

2.使用umy-ui库中的表格代替el-table

u-table不支持展开行，需要展开行使用ux-grid
ux-grid解决列多行多导致卡的情况
u-table解决行多的情况，不解决列多的情况

下面是ux-grid懒加载展开行的例子：

// main.js
import 'umy-ui/lib/theme-chalk/index.css'// 引入样式
import { UTableColumn, UTable, UxGrid, UxTableColumn } from 'umy-ui' // 按需引入组件
Vue.component(UTable.name, UTable)
Vue.component(UTableColumn.name, UTableColumn)
Vue.component(UxGrid.name, UxGrid)
Vue.component(UxTableColumn.name, UxTableColumn)

加上row-id属性，以及展开行tree-config、expand-config ,ux-table-column添加tree-node属性

<template>
  <!-- 表格 -->
  <div class="table-container">
    <ux-grid
      ref="plxTable"
      border
      :data="tableData"
      row-id="key"
      :tree-config="{lazy: true, children: 'children', hasChild: 'hasChildren', loadMethod: load}"
      :expand-config="{ labelField: 'key', expandAll: false}"
      <ux-table-column
        v-for="(item, index) in tableConfig"
        :key="index"
        align="center"
        :field="item.prop"
        :title="item.label"
        :width="tableData.length ? item.width : 'auto'"
        :fixed="item.fixed"
        :tree-node="item.prop == 'key'"
        <template slot-scope="{ row }">
          <span>{{ row[item.prop] }}</span>
        </template>
      </ux-table-column>
    </ux-grid>
</template>

load 方法里面是后端请求回来的数据，需要return出去

methods: {
    async load({ row }) {
      let nodes = []
      this.$store.commit('settings/CHANGE_LOADING', true)
      try {
        const res = await queryUsersStatistics({
          date: this.date,
          appKey: row.key
        const { success, data } = res
        if (success && data) {
          console.log(data)
          nodes = data.map((item) => {
            const { key, total, minuteCountTable } = item
            return {
              total,
              ...minuteCountTable
        this.$store.commit('settings/CHANGE_LOADING', false)
      } catch (error) {
        console.log(error)
        this.$store.commit('settings/CHANGE_LOADING', false)
      console.log('nodes', nodes)
      return nodes
3.不采用ui中的表格组件，自定义虚拟表格加载数据（此方法比较复杂，手动实现虚拟表格） 
放在下一篇。。。
				需求分析（长列表展示）
页面某处需要渲染 1w+ 条数据，并需要滚动展示，这时如果直接把这些数据渲染到页面上，会导致系统内存大量被占用，导致页面卡顿或崩溃
我们都知道，每次 DOM 修改，浏览器都会重新计算元素布局，再重新渲染（回流 / 重绘）。如果数据量很大，页面计算时间就会加成，造成页面卡顿
根源：DOM 元素太多
思路：限制元素数量 / 虚拟DOM
后台数据格式：
        checked: 0，
        data: "xxx"，
第一个参数为要更新数据的数组，第二个参数为要更新的数组中具体的元素下标，第三个参数为新数据
数组原型上的方法vue可直接检测到变化：push(),pop(),shift(),unshift(),splice(),sort()
二、数据为对象时:
Vue 不能检测对象属性的添加或删除：你可以这样添加一个属性
如果要添加多个属性可以
补充知识：v
				解决方案参考：https://blog.csdn.net/tzllxya/article/details/90676040?utm_medium=distribute.wap_relevant_download.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.wap_relevant_download.none-task-blog-baidujs-1.nonecase
一、原因分析
当页面表格出现大量数据时，页面中的DO
				现象：页面在跳转时，路由发生了改变，但是页面还停留在上一个路由的页面
原因：在路由跳转时，vue销毁页面数据用时过长，导致页面卡顿。经过排查发现页面中有一个select下拉选择框，数组有1w+,造成了页面卡死现象。
//在获取数据时进行处理，只展示10条
 async getUserList() {
      let data = await getUserList({})
      this.allUserLists = data.fst.map(item => {
1. 页面中有大量DOM操作或重复渲染导致性能瓶颈。建议优化DOM结构，减少不必要的渲染次数。
2. 页面中使用了大量的图片或音视频等资源，导致内存占用过高。可以通过懒加载、图片压缩等方式来优化。
3. 页面过于复杂，嵌套层次过深，导致渲染时间过长。可考虑使用异步组件或Vue的keep-alive组件优化页面渲染速度。
4. 页面中可能存在函数执行时间过长或某些异步请求未被正确处理导致卡顿。建议对异步请求进行错误处理和统一管理，确保异步请求的正确性和有效性。
综上所述，要解决Vue页面切换销毁时卡顿的问题，需要根据实际情况进行具体分析并采取相应的优化措施。