dynamic

<template>
  <div>
    <p>
      这些组件使用的是 <strong>动态</strong> 尺寸。这意味着每个元素的精确尺寸在渲染时是未知的。一个估计尺寸被用作初始测量值，然后这个测量值在每个元素渲染时即时重新调整。
    </p>
    <nav>
      <ul>
        <li>
          <a href="javascript:pathname='/';void(0)">List</a>
        </li>
        <li>
          <a href="javascript:pathname='/window-list';void(0)">List - window as scroller</a>
        </li>
        <li>
          <a href="javascript:pathname='/columns';void(0)">Column</a>
        </li>
        <li>
          <a href="javascript:pathname='/grid';void(0)">Grid</a>
        </li>
      </ul>
    </nav>
    <RowVirtualizerDynamic v-if="pathname === '/'" />
    <RowVirtualizerDynamicWindow v-else-if="pathname === '/window-list'" />
    <ColumnVirtualizerDynamic v-else-if="pathname === '/columns'" />
    <GridVirtualizerDynamic v-else-if="pathname === '/grid'" />
    <div v-else>Not found</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import RowVirtualizerDynamic from './RowVirtualizerDynamic.vue'
import RowVirtualizerDynamicWindow from './RowVirtualizerDynamicWindow.vue'
import ColumnVirtualizerDynamic from './ColumnVirtualizerDynamic.vue'
import GridVirtualizerDynamic from './GridVirtualizerDynamic.vue'

// const pathname = computed(() => window.location.pathname)
const pathname = ref('/')

watch(pathname, (value) => {
  console.log(value)
})
</script>
variable
sticky