x-extends / vxe-table

Vxe table 的表格组件
https://vxetable.cn
MIT License
7.64k stars 1.06k forks source link

vxegrid v3版本 使用cellRender 分页切换时造成多次重复渲染 #2306

Open djkloop opened 9 months ago

djkloop commented 9 months ago

可复现的链接:

https://codesandbox.io/p/github/djkloop/vxetable-plugin-isssus/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls4215mh00063j6i2dv67z9r%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls4215mh00023j6irvco17zg%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls4215mh00043j6ipabxm4uc%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls4215mh00053j6iy4uah1md%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls4215mh00023j6irvco17zg%2522%253A%257B%2522id%2522%253A%2522cls4215mh00023j6irvco17zg%2522%252C%2522activeTabId%2522%253A%2522cls424ngl00pp3j6i9nzb9tmj%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls4215mg00013j6ikb6lxdgc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522id%2522%253A%2522cls424ngl00pp3j6i9nzb9tmj%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cls4215mh00053j6iy4uah1md%2522%253A%257B%2522id%2522%253A%2522cls4215mh00053j6iy4uah1md%2522%252C%2522activeTabId%2522%253A%2522cls424hzk00n13j6i6w0ikafv%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522cls424hzk00n13j6i6w0ikafv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522cls4215mh00043j6ipabxm4uc%2522%253A%257B%2522id%2522%253A%2522cls4215mh00043j6ipabxm4uc%2522%252C%2522activeTabId%2522%253A%2522cls4216t1005v3j6i0a00yimz%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls4215mh00033j6ii07vvkbk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522cls4216oz000zddesdh96ef1h%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cls4216t1005v3j6i0a00yimz%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522CSB_RUN_OUTSIDE_CONTAINER%253D1%2520devcontainer%2520templates%2520apply%2520--template-id%2520%255C%2522ghcr.io%252Fdevcontainers%252Ftemplates%252Ftypescript-node%255C%2522%2520--template-args%2520%27%257B%257D%27%2520--features%2520%27%255B%255D%27%2522%252C%2522id%2522%253A%2522cls421iue007e3j6idan8wk2w%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

问题描述与截图:

用cellRender渲染的组件无缘无故会重新渲染而且只有第一个缓存主了 加key 加keep-alive都没效果,上面是最小复现的例子

# npx envinfo --system --binaries --npmPackages vxe-table  --browsers

  System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400
    Memory: 17.81 GB / 31.78 GB
  Binaries:
    Node: 18.17.0 - D:\soft\nvm-node\node.EXE
    Yarn: 1.17.0 - D:\soft\nvm-node\yarn.CMD
    npm: 9.6.7 - D:\soft\nvm-node\npm.CMD
    pnpm: 8.6.9 - D:\soft\nvm-node\pnpm.CMD
    bun: 1.0.25 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (121.0.2277.83)
    Internet Explorer: 11.0.19041.3636
  npmPackages:
    vxe-table: ^3.7.8 => 3.7.8

GIF 2024-2-2 11-09-10

期望的结果:

能正常缓存住组件,因为有些组件会发请求,这样会重复发送请求,

操作系统:

win10

浏览器版本:

Edge: Chromium (121.0.2277.83)

vue 版本:

2.7.16

vxe-table 版本:

3.7.8

djkloop commented 9 months ago

经过我自己的测试,这个问题更像是vue的渲染机制问题....不清楚vue能不能做到像react那样

# 我自己测试了下 vue2/vue3 只要是表格 [vue ant-design-vue]的表格貌似也有这个问题
# https://codesandbox.io/s/tqq4sq

# 但是我用react版本的表格,同样是 [ant design]的表格貌似就不会重复渲染
# https://codesandbox.io/p/sandbox/xuan-ze-he-cao-zuo-antd-5-13-2-kzkmqm

# update  新找到一个vue表格性能很优秀,做到了没变化的组件不渲染的需求,不知道vxe能不能改造成这样
# https://codesandbox.io/p/sandbox/pagination-slot-75n6iv?file=%2Fsrc%2FApp.vue

vue版本的效果 gif

GIF 2024-2-2 16-53-00

react版本的效果 gif

GIF 2024-2-2 16-51-10

vue新找到的效果 gif

GIF 2024-2-2 19-02-22