perf(VDataTable): reduce reactivity overhead for immutable items

[KaelWD]

Needs testing to ensure this doesn't break reactivity

• filter:
  • before: 80ms
  • after: 76ms (same)
• sort:
  • before: 1690ms
  • after: 260ms (6.5x faster)
• update:
  • before: 834ms
  • after: 82ms (10x faster)

<template>
  <v-app>
    <v-container>
      <v-text-field v-model="search" />
      <v-data-table
        :headers="headers"
        :items="virtualBoats"
        :search="search"
        height="400"
        item-value="name"
      />
      <v-btn @click="update">update</v-btn>
    </v-container>
  </v-app>
</template>

<script setup>
  import { computed, markRaw, readonly, ref, shallowReadonly } from 'vue'

  const search = ref('')

  const headers = [
    { title: 'Boat Type', align: 'start', key: 'name' },
    { title: 'Speed (knots)', align: 'end', key: 'speed' },
    { title: 'Length (m)', align: 'end', key: 'length' },
    { title: 'Price ($)', align: 'end', key: 'price' },
    { title: 'Year', align: 'end', key: 'year' },
  ]

  const boats = [
    {
      name: 'Speedster',
      speed: 35,
      length: 22,
      price: 300000,
      year: 2021,
    },
    {
      name: 'OceanMaster',
      speed: 25,
      length: 35,
      price: 500000,
      year: 2020,
    },
    {
      name: 'Voyager',
      speed: 20,
      length: 45,
      price: 700000,
      year: 2019,
    },
    {
      name: 'WaveRunner',
      speed: 40,
      length: 19,
      price: 250000,
      year: 2022,
    },
    {
      name: 'SeaBreeze',
      speed: 28,
      length: 31,
      price: 450000,
      year: 2018,
    },
    {
      name: 'HarborGuard',
      speed: 18,
      length: 50,
      price: 800000,
      year: 2017,
    },
    {
      name: 'SlickFin',
      speed: 33,
      length: 24,
      price: 350000,
      year: 2021,
    },
    {
      name: 'StormBreaker',
      speed: 22,
      length: 38,
      price: 600000,
      year: 2020,
    },
    {
      name: 'WindSail',
      speed: 15,
      length: 55,
      price: 900000,
      year: 2019,
    },
    {
      name: 'FastTide',
      speed: 37,
      length: 20,
      price: 280000,
      year: 2022,
    },
  ]

  const virtualBoats = ref(
    shallowReadonly(
      [...Array(100000).keys()].map(i => {
        const boat = { ...boats[i % 10] }
        boat.name = `${boat.name} #${i}`
        return boat
      })
    )
  )

  let i = 0
  function update () {
    const newBoats = shallowReadonly([...virtualBoats.value])
    newBoats[i++].name = 'AAAUpdated'
    virtualBoats.value = newBoats
  }
  function update2 () {
    virtualBoats.value[i++].name = 'Updated'
  }
</script>

[yuwu9145]

Comment it out, same performance.

This line seems has no impact on prevent reactivity overhead as per testing.

Looks like shallowReadonly removes element's reactivity already demo

[yuwu9145]

Very cool PR

Since DataTableItemProps aren't reactive, not sure if we were supposed to support itemSelectable change in runtime, but if we do, then it isn't reactive anymore.

Other props in DataTableItemProps shouldn't be changed in runtime I think, so they are not a concern

<template>
  <v-app>
    <v-container>
      <v-text-field v-model="search" />
      <v-btn
        @click="selectableProp = 'disabled'"
      >change selectable Prop to disabled</v-btn>
      <v-data-table
        :headers="headers"
        :items="virtualBoats"
        :search="search"
        height="400"
        :item-selectable="selectableProp"
        item-value="name"
        show-select
      />
      <v-btn @click="update">update</v-btn>
    </v-container>
  </v-app>
</template>

<script setup>
  import { computed, markRaw, readonly, ref, shallowReadonly } from 'vue'

  const search = ref('')
  const selectableProp = ref('selectable')

  const headers = [
    { title: 'Boat Type', align: 'start', key: 'name' },
    { title: 'Speed (knots)', align: 'end', key: 'speed' },
    { title: 'Length (m)', align: 'end', key: 'length' },
    { title: 'Price ($)', align: 'end', key: 'price' },
    { title: 'Year', align: 'end', key: 'year' },
  ]

  const boats = [
    {
      name: 'Speedster',
      speed: 35,
      length: 22,
      price: 300000,
      year: 2021,
      selectable: true,
      disabled: false,
    },
    {
      name: 'OceanMaster',
      speed: 25,
      length: 35,
      price: 500000,
      year: 2020,
      selectable: false,
      disabled: true,
    },
    {
      name: 'Voyager',
      speed: 20,
      length: 45,
      price: 700000,
      year: 2019,
      selectable: false,
      disabled: true,
    },
    {
      name: 'WaveRunner',
      speed: 40,
      length: 19,
      price: 250000,
      year: 2022,
      selectable: true,
      disabled: false,
    },
    {
      name: 'SeaBreeze',
      speed: 28,
      length: 31,
      price: 450000,
      year: 2018,
      selectable: true,
      disabled: false,
    },
    {
      name: 'HarborGuard',
      speed: 18,
      length: 50,
      price: 800000,
      year: 2017,
      selectable: true,
      disabled: false,
    },
    {
      name: 'SlickFin',
      speed: 33,
      length: 24,
      price: 350000,
      year: 2021,
      selectable: true,
      disabled: false,
    },
    {
      name: 'StormBreaker',
      speed: 22,
      length: 38,
      price: 600000,
      year: 2020,
      selectable: true,
      disabled: false,
    },
    {
      name: 'WindSail',
      speed: 15,
      length: 55,
      price: 900000,
      year: 2019,
      selectable: true,
      disabled: false,
    },
    {
      name: 'FastTide',
      speed: 37,
      length: 20,
      price: 280000,
      year: 2022,
      selectable: true,
      disabled: false,
    },
  ]

  const virtualBoats = ref(
    shallowReadonly([...Array(100000).keys()].map(i => {
      const boat = { ...boats[i % 10] }
      boat.name = `${boat.name} #${i}`
      return boat
    }))
  )

  let i = 0
  function update () {
    const newBoats = [...virtualBoats.value]
    newBoats[i++].name = 'AAAUpdated'
    virtualBoats.value = newBoats
  }
  function update2 () {
    virtualBoats.value[i++].name = 'Updated'
  }
</script>