docs(vue-virtual): use onUpdated for measureElement to prevent scroll jumping

Author: Mini-ghost

examples/vue/dynamic/src/components/ColumnVirtualizerDynamic.vue

@@ -15,7 +15,7 @@
         v-for="virtualColumn in virtualColumns"
         :key="virtualColumn.key"
         :data-index="virtualColumn.index"
-        :ref="measureElement"
+        ref="virtualItemEls"
         :class="virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
         :style="{
           position: 'absolute',
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, type VNodeRef } from 'vue'
+import { ref, computed, onMounted, onUpdated, shallowRef } from 'vue'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { generateSentences } from './utils'
 
@@ -54,13 +54,14 @@ const virtualColumns = computed(() => columnVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => columnVirtualizer.value.getTotalSize())
 
-const measureElement = (el) => {
-  if (!el) {
-    return
-  }
+const virtualItemEls = shallowRef([])
 
-  columnVirtualizer.value.measureElement(el)
-
-  return undefined
+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) columnVirtualizer.value.measureElement(el)
+  })
 }
+
+onMounted(measureAll)
+onUpdated(measureAll)
 </script>

examples/vue/dynamic/src/components/GridVirtualizerDynamic.vue

@@ -9,7 +9,7 @@
       <template v-for="virtualRow in virtualRows" :key="virtualRow.key">
         <div
           :data-index="virtualRow.index"
-          :ref="measureElement"
+          ref="virtualItemEls"
           :style="{
             position: 'absolute',
             top: 0,
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, type VNodeRef } from 'vue'
+import { ref, computed, onMounted, onUpdated, shallowRef } from 'vue'
 import { useWindowVirtualizer, useVirtualizer } from '@tanstack/vue-virtual'
 import { generateData, generateColumns } from './utils'
 
@@ -103,13 +103,14 @@ const width = computed(() => {
     : [0, 0]
 })
 
-const measureElement = (el) => {
-  if (!el) {
-    return
-  }
-
-  rowVirtualizer.value.measureElement(el)
+const virtualItemEls = shallowRef([])
 
-  return undefined
+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) rowVirtualizer.value.measureElement(el)
+  })
 }
+
+onMounted(measureAll)
+onUpdated(measureAll)
 </script>

examples/vue/dynamic/src/components/RowVirtualizerDynamic.vue

@@ -13,7 +13,7 @@
     <div
       ref="parentRef"
       class="List"
-      style="height: 400px; width: 400px; overflow-y: auto; contain: strict"
+      style="height: 400px; width: 400px; overflow-y: auto; contain: strict;"
     >
       <div
         :style="{
@@ -35,7 +35,7 @@
             v-for="virtualRow in virtualRows"
             :key="virtualRow.key"
             :data-index="virtualRow.index"
-            :ref="measureElement"
+            ref="virtualItemEls"
             :class="virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
           >
             <div style="padding: 10px 0">
@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, onMounted, onUpdated, ref, shallowRef } from 'vue'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { generateSentences } from './utils'
 
@@ -68,13 +68,14 @@ const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
 
-const measureElement = (el) => {
-  if (!el) {
-    return
-  }
+const virtualItemEls = shallowRef([])
 
-  rowVirtualizer.value.measureElement(el)
-
-  return undefined
+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) rowVirtualizer.value.measureElement(el)
+  })
 }
+
+onMounted(measureAll)
+onUpdated(measureAll)
 </script>

examples/vue/dynamic/src/components/RowVirtualizerDynamicWindow.vue

@@ -22,7 +22,7 @@
           v-for="virtualRow in virtualRows"
           :key="virtualRow.key"
           :data-index="virtualRow.index"
-          :ref="measureElement"
+          ref="virtualItemEls"
           :class="virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
         >
           <div style="padding: 10px 0">
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUpdated, shallowRef } from 'vue'
 import { useWindowVirtualizer } from '@tanstack/vue-virtual'
 import { generateSentences } from './utils'
 
@@ -64,13 +64,14 @@ const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 
 const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
 
-const measureElement = (el) => {
-  if (!el) {
-    return
-  }
-
-  rowVirtualizer.value.measureElement(el)
+const virtualItemEls = shallowRef([])
 
-  return undefined
+function measureAll() {
+  virtualItemEls.value.forEach((el) => {
+    if (el) rowVirtualizer.value.measureElement(el)
+  })
 }
+
+onMounted(measureAll)
+onUpdated(measureAll)
 </script>