🐛vue版本大数据时卡顿

[hbyhby]

vue版本大数据时卡顿

🏷 Version

Package	Version
@antv/s2	1.41.0
@antv/s2-react	1.36.0
@antv/s2-vue	1.5.0

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

vue版本大数据情况卡顿

1.vue版本中，数据过多时，页面更新延迟。 hooks-> useResize. s2Ref 的 deep watch 导致
2. hooks 对应地址 antvis/S2/packages/s2-vue/src/hooks/useResize.ts

⌨️ Code Snapshots

 watch(
    [s2Ref, () => props.adaptive],
    ([s2, adaptive], _, onCleanup) => {
      if (!s2) {
        return;
      }
      unobserve.value = createResizeObserver({
        s2,
        adaptive,
        wrapper: dom.wrapperRef.value!,
        container: dom.containerRef.value!,
      });

      onCleanup(() => {
        unobserve.value?.();
      });
    },
    { deep: true },
  );

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment	Info
System
Browser

[github-actions]

你好 @hbyhby，请编辑你的 issue 标题, 一个言简意赅的 issue 标题可以节省大家的时间, 请不要将标题当做正文, 或者为空。

Hello, @hbyhby, please edit your issue title. a concise issue title will save everyone time. please do not leave the title as the body or empty.

[github-actions]

你好 @hbyhby，请提供一个可以在线访问的链接, 或者使用 codesandbox 提供示例并详细说明复现步骤 (查看更多模板), 15 天内未回复issue自动关闭。

Hello, @hbyhby, please provide an accessible link or usage codesandbox to describe the reproduction steps (more template). The issue will be closed without any replay within 15 days.

[hbyhby]

不好意思没有外部链接，但是感觉这块是不合理的对SpreadSheet实例做 deep watch。vue3 deep watch 在其他属性改变时会对监控数据为数组的监控做递归遍历，导致之后的其他属性改动都会因为这个数据量过大而导致延迟 --粗略看了下。

[lcx-seima]

这个地方应该不影响(s2外层是shallowref)，如果频繁变动 useResize 里应该会执行多次吧。目前我本地看没发现这样的现象。

[hbyhby]

你好，我这边看不是deep会多次执行，是deep引起的数组递归扫描。 因为deep的数据是个数组，所以会递归扫描去做watch。只要页面有其他ref或reactive变更就回引发递归扫描。

…

------------------ 原始邮件 ------------------ 发件人: "antvis/S2" ***@***.***>; 发送时间: 2023年2月20日(星期一) 晚上6:03 ***@***.***>; ***@***.******@***.***>; 主题: Re: [antvis/S2] 🐛vue版本大数据时卡顿 (Issue #2078) 这个地方应该不影响(s2外层是shallowref)，如果频繁变动 useResize 里应该会执行多次吧。目前我本地看没发现这样的现象。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[hbyhby]

我加下文件名称： vue 的runtime-core。中 doWatch方法。 用的是github下的开发版， vue:playground      http://localhost:5050/ 测试。 traverse 代码

…

------------------ 原始邮件 ------------------ 发件人: "hby" ***@***.***>; 发送时间: 2023年2月20日(星期一) 晚上7:35 ***@***.***>; 主题: 回复： [antvis/S2] 🐛vue版本大数据时卡顿 (Issue #2078) 你好，我这边看不是deep会多次执行，是deep引起的数组递归扫描。 因为deep的数据是个数组，所以会递归扫描去做watch。只要页面有其他ref或reactive变更就回引发递归扫描。

------------------ 原始邮件 ------------------ 发件人: "antvis/S2" ***@***.***>; 发送时间: 2023年2月20日(星期一) 晚上6:03 ***@***.***>; ***@***.******@***.***>; 主题: Re: [antvis/S2] 🐛vue版本大数据时卡顿 (Issue #2078) 这个地方应该不影响(s2外层是shallowref)，如果频繁变动 useResize 里应该会执行多次吧。目前我本地看没发现这样的现象。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>