Using KeepAlive when the DOM is large will cause lag #12328
Unanswered
HaceraI
asked this question in
Help/Questions
Replies: 1 comment
-
|
It would help if you considered paginating the data. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Vue version
v3.5.12
Link to minimal reproduction
https://play.vuejs.org/#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
Steps to reproduce
Load recordsbutton in Table 1Table 2and click theLoad recordsbutton againWhat is expected?
Reduce latency
What is actually happening?
There is a little lag
System Info
System: OS: Windows 11 10.0.22631 CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz Memory: 29.55 GB / 63.79 GB Binaries: Node: 20.18.0 - C:\Program Files\nodejs\node.EXE npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD pnpm: 9.12.3 - C:\Program Files\nodejs\pnpm.CMD Browsers: Google: 130.0.6723.92 (Official Build) (64-bit) Edge: Chromium (127.0.2651.74) Internet Explorer: 11.0.22621.3527 npmPackages: vue: ^3.5.12 => 3.5.12Any additional comments?
You can turn on devtools performance logging.
Since the example does not rely on any UI library, I increased the number of records. When used in conjunction with a UI library, it may be more obvious:
video1.webm
Beta Was this translation helpful? Give feedback.
All reactions