Vue 数据优化问题请教！

Question

做一个表格每个 tD, 有很多信息。

现在发现当我新增第一行，用时 3ms, 到第 40行，要 20ms 一行了

数据结构： 
1行  【{td对象},{td对象},{td对象},{td对象}】
2行  【{td对象},{td对象},{td对象},{td对象}】
。。。

每个td对象有下面这些信息
interface TableCell {
  is_active:boolean
  rc: { r: number, c: number, maxr: number, maxc: number },
  value: string | number | Date,  // 值
  type?: string, // 单元格描述,自定义选择列表,引用数据,关联引用,数据输入,数据导入,数据计算
  format?: {
    string: { is_active: boolean },
    number: { is_active: boolean, round: number, thousand_sep: false, unit: string, pre: string },  // pre是前缀 ,货币标识图案等 Thousand_sep 千分符
    percentage: { is_active: boolean, round: number, }, // 百分比
    date: { is_active: boolean, format: string, },
    custom: { is_active: boolean, format: '', }
  },
 还有。。一堆。。省略

由于是自定义表格，所有很多信息是没法固定的，这是造成信息多的原因。
现在就面临优化的问题，感觉这样不行。请教优化思路

Answer 1

时间是vue渲数据到dom中的时间还是添加到js集合中的时间？

js集合视乎没什么好办法，数据量在那。。不过题主说的时间应该不是这个
vue渲染的话给dom加上key。

如果是自己手写的代码连续添加，可以先添加到文档片段中，再一次性添加到dom容器中。
参考这个：

说一下减少dom的办法？一次性给你大量的dom怎么优化？_一夜枫林的博客-CSDN博客_减少dom操作 一、减少dom数量的方法可以使用伪元素，阴影实现的内容尽量不使用DOM实现，如清除浮动、样式实现等；按需加载，减少不必要的渲染；结构合理，语义化标签二、大量DOM时的优化当对Dom元素进行一系列操作时，对Dom进行访问和修改Dom引起的重绘和重排都比较消耗性能，所以关于操作Dom，应该从以下几点出发：1. 缓存Dom对象首先不管在什么场景下。操作Dom一般首先会去访问Dom，尤其是像循环遍历这种事件复杂度可能会比较高的操作/那么可以在循环之前就将主节点，不必循环的Dom节点先获取到，那么在 https://blog.csdn.net/m0_45070460/article/details/107604658