Collapse make page or other component slow with a large items (1000+)

[Bee777]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.6.1

Environment

Windows 10, Chrome Latest Version, Vuejs v2.6.10

Reproduction link

Steps to reproduce

1. Try to click any collapse item or date picker, the clicked component will slow to act

What is expected?

Get it work smooth as normal

What is actually happening?

The page will slow to interact with or any component will slow too.

[VanMess]

之前也遇到过这个问题，无解！除非重写整个组件。

因为，代码里面会在render 处理this.$slot.default ，给每一个元素设置属性值，并且，clone一个新的element，这一步比较耗性能：

https://github.com/VanMess/ant-design-vue/blob/master/components/vc-collapse/src/Collapse.jsx#L107

之外，展开状态是在 collapse 组件的 stateActiveKey 属性记录的，每次展开时 stateActiveKey 变更导致 collapse 重新执行render，这个render很要命地又会执行上一步，也就是clone所有 $slot.default 里面的元素。结果就是，每次展开收缩，都会重新渲染所有子组件，没有缓存，没有diff！！！所以性能差是自然的。

要改的话，只能重写组件，更改接口形态了

[Bee777]

@VanMess Thanks for reply,

i can't read it but after i use google translate i have a little bit understand what you would like to tell me,
so i will try to using another approach like make virtual list,

[tangjinzhou]

yes，you should try use virtual list when have so more data.

[arika163]

之前也遇到过这个问题，无解！除非重写整个组件。

因为，代码里面会在render 处理this.$slot.default ，给每一个元素设置属性值，并且，clone一个新的element，这一步比较耗性能：

https://github.com/VanMess/ant-design-vue/blob/master/components/vc-collapse/src/Collapse.jsx#L107

之外，展开状态是在 collapse 组件的 stateActiveKey 属性记录的，每次展开时 stateActiveKey 变更导致 collapse 重新执行render，这个render很要命地又会执行上一步，也就是clone所有 $slot.default 里面的元素。结果就是，每次展开收缩，都会重新渲染所有子组件，没有缓存，没有diff！！！所以性能差是自然的。

要改的话，只能重写组件，更改接口形态了

我也遇到了类似的大数据量的场景，为了定位问题我改了下collapse的render，打印整个render的执行消耗时间，发现耗时其实只有1ms左右。如果我没记错的话render函数主要是用来生成Vnode树，然后和旧的Vnode树对比跑patch。我怀疑主要耗时还是发生在patch步骤，但是不太确定问题在哪。activeKey变化导致的flushScheduleQueue在开始执行时里面只有两个watcher，但执行结束时增加到了2600多个，我想知道底层的原理是什么样的。

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.