Destroy/Create Highly Abnormal

[CylAlon]

Describe the bug

DynamicScroll is encapsulated in a component that switches through a router. It is found that when switching back, the data height increases, and with multiple switches, the height increases.
The attachment below is a rendering of my multiple switches, and it is evident that the heights are different.

Below is my .vue code：
`

<script setup lang="ts"> import { ref, onMounted, watch, nextTick, computed, useTemplateRef } from "vue"; import { useSerialStore } from "@/store/serialStore"; import { useConfigStore } from "@/store/configStore"; import SerialConfig from "./SerialConfig.vue"; import { FloatComponentsCfg } from "@/components/general/foatComponents"; import { useI18n } from "vue-i18n"; const { t } = useI18n(); const serialStore = useSerialStore(); const configStore = useConfigStore(); const serialCfg = computed(() => configStore.getCfg.serial.cfg); const data = serialStore.data; // 获取虚拟滚动所需的数据 // const refresh = ref(serialStore.refresh) import FloatComponents from "@/components/general/FloatComponents.vue"; import SendPanel from "./SendPanel.vue"; // --- import { DynamicScroller } from 'vue-virtual-scroller' const scrollerRef = ref>() const floatRef = useTemplateRef('floatRef') const floatCompletionCallback = () => { floatRef.value?.completionCallback() } // const show_hex = ref(true) const showConfigPanel = ref(false) const showSendPanel = ref(false) const openConfigPanel = () => { showConfigPanel.value = true showSendPanel.value = false } const openSendPanel = () => { showConfigPanel.value = false showSendPanel.value = true } // 通过索引跳转 // 修正后方法 // const scrollToIndex = (index: number) => { // nextTick(() => { // (scrollerRef.value?.scrollToItem as any)?.(index) // 直接调用组件方法 // // 或尝试 // // scrollerRef.value?.scrollToIndex?.(index) // }) // } const pause = ref(false) const mouseIn = () => { pause.value = true }; const mouseOut = () => { pause.value = false }; const serialClear = () => { serialStore.clear() floatCompletionCallback() } const floatData = ref([ new FloatComponentsCfg({ color: 'teal', icon: 'delete_forever', callback: () => serialClear(), label: t('serial.clear') }), new FloatComponentsCfg({ color: 'primary', icon: 'settings', callback: () => openConfigPanel(), label: t('set') }), new FloatComponentsCfg({ color: 'purple', icon: 'send', callback: () => openSendPanel(), label: t('send') }) ]) const enterEnd = () => { (scrollerRef.value?.scrollToBottom as any)?.() } // 初次加载后的跳转示例 onMounted(async () => { await nextTick() // 确保虚拟列表已渲染 enterEnd() watch(() => serialStore.refresh, async () => { nextTick(() => { if (!pause.value) { enterEnd() } }) }) }) </script>

      <div class="row">
        <div class="col-2 text-blue-8 datetime-col"  v-if="serialCfg.show_datatime"> {{ item.datatime }}
        </div>
        <div class="col break-word ascii-col">{{ item.ascii }}</div>
        <div class="col break-word q-ml-sm hex-col" v-if="serialCfg.show_hex">{{ item.hex }}</div>
      </div>
    </DynamicScrollerItem>
  </template>
</DynamicScroller>

<style scoped lang="scss"> #seroial-panel { padding: var(--context-space); box-sizing: border-box; }

.scroller {
height: 100%;
}

.datetime-col {
width: 200px;
flex-shrink: 0;
font-family: monospace;
font-size: 13px;
opacity: 0.8;
// line-height: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.ascii-col,
.hex-col {
font-family: monospace;
font-size: 13px;
// line-height: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.break-word {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.dialog-style {
width: 35vw;
}

</style>

`

Reproduction

System Info

(base) cyl@CylAlon toolbox % npx envinfo

  System:
    OS: macOS 15.5
    CPU: (8) arm64 Apple M1
    Memory: 94.69 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
  Managers:
    Cargo: 1.85.0 - ~/.cargo/bin/cargo
    CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
    Gradle: 8.13 - /opt/homebrew/bin/gradle
    Homebrew: 4.5.2 - /opt/homebrew/bin/brew
    pip3: 24.2 - /opt/anaconda3/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 17.0.0 - /usr/bin/gcc
    Git: 2.48.1 - /opt/homebrew/bin/git
    Clang: 17.0.0 - /usr/bin/clang
    Curl: 8.9.1 - /opt/anaconda3/bin/curl
    OpenSSL: 3.0.15 - /opt/anaconda3/bin/openssl
  Servers:
    Apache: 2.4.62 - /usr/sbin/apachectl
  Virtualization:
    Docker: 28.0.4 - /usr/local/bin/docker
    Docker Compose: 2.34.0 - /usr/local/bin/docker-compose
  SDKs:
    iOS SDK:
      Platforms: DriverKit 24.4, iOS 18.4, macOS 15.4, tvOS 18.4, visionOS 2.4, watchOS 11.4
  IDEs:
    Android Studio: 2024.3 AI-243.22562.218.2431.13114758
    VSCode: 0.48.9 - /usr/local/bin/code
    Vim: 9.1 - /usr/bin/vim
    Xcode: 16.3/16E140 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Go: 1.24.1 - /usr/local/go/bin/go
    Java: 17.0.14 - /opt/homebrew/opt/openjdk@17/bin/javac
    Perl: 5.34.1 - /usr/bin/perl
    Protoc: 25.3 - /opt/anaconda3/bin/protoc
    Python: 3.12.7 - /opt/anaconda3/bin/python
    Python3: 3.12.7 - /opt/anaconda3/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
    Rust: 1.85.0 - /Users/cyl/.cargo/bin/rustc
  Databases:
    MySQL: 5.7.24 - /opt/anaconda3/bin/mysql
    SQLite: 3.44.3 - /Users/cyl/Library/Android/sdk/platform-tools/sqlite3
  Browsers:
    Chrome: 137.0.7151.70
    Safari: 18.5

(base) cyl@CylAlon toolbox %

Used Package Manager

npm

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.