fix(VTreeview): faster interactions with large trees

[J-Sek]

fixes #21720

Introduces items-registration prop - "props" | "render" (set to "render" for backward compatibility).
When set to "props", registration of nested items won't require rendering VListItems.

Note: Change to "props" (as default) should be considered for v4.0.0.

Markup:

<template>
  <v-app theme="dark">
    <v-container>
      <div v-if="loading" style="position: absolute; top: 50%; left: 30%">
        <v-progress-circular
          color="blue"
          size="40"
          width="2"
          indeterminate
        />
      </div>
      <v-treeview
        v-else
        :items="items"
        density="compact"
        item-title="NEV"
        item-value="S_ID"
        items-registration="props"
        select-strategy="classic"
        activatable
        hoverable
        open-on-click
        selectable
      >
        <template #title="{ title, item }">
          #{{ item.S_ID }} | {{ title }}
        </template>
      </v-treeview>
    </v-container>
  </v-app>
</template>

<script setup>
  import { onMounted, shallowRef } from 'vue'

  const loading = shallowRef(false)
  const items = shallowRef([])
  onMounted(() => getData())
  async function getData () {
    loading.value = true
    const response = await fetch('https://dummyjson.com/c/f63f-7404-4b5a-be8e')
    items.value = (await response.json()).res

    function countNodes (tree) {
      return tree.length + tree.filter(x => x.children)
        .map(x => x.children ? countNodes(x.children) : 0)
        .reduce((sum, n) => sum + n, 0)
    }
    console.log('loaded nodes:', countNodes(items.value))
    loading.value = false
  }
</script>

[KaelWD]

Does not support links, so you might need to set item-value to href, to or a custom resolver function.

Do you have an example of what specifically is broken by this?

[KaelWD]

Related: #21325

[J-Sek]

Does not support links, so you might need to set item-value to href, to or a custom resolver function.

Do you have an example of what specifically is broken by this?

<template>
  <v-app theme="dark">
    <v-container>
      <v-treeview
        :items="items"
        items-registration="props"
        select-strategy="classic"
        selectable
      />
    </v-container>
  </v-app>
</template>

<script setup>
  const items = [
    {
      value: 'group-1',
      title: 'Components',
      children: [
        // missing explicit `value=...`, won't be picked up by items-registration="props"
        { href: 'https://vuetifyjs.com/en/components/treeview', title: 'Treeview' },
        { href: 'https://vuetifyjs.com/en/components/buttons', title: 'Buttons' },
        { href: 'https://vuetifyjs.com/en/components/cards', title: 'Cards' },
      ],
    },
  ]
</script>

[KaelWD]

That doesn't seem to be any different to on master. Playground

[KaelWD]

return-object is currently broken, with items-registration="render" id is actually the entire object here

vuetify/packages/vuetify/src/composables/nested/nested.ts

Line 363 in c33e336

activate: (id, value, event) => {

and also the keys in the children and parents maps

[J-Sek]

Restored support for return-object. I don't like how it leaks into nested.ts... In the ideal world it should probably be scoped to the transformOut on the selection model.