refactor: remove computed()

[KaelWD]

#21114

A lot of the time in VBtn is just computed() and computed.get() for pretty simple string values, can we speed it up by replacing computed with getters instead of creating a separate component?

Markup:

<template>
  <v-app>
    <v-container>
      <button @click="show = 'btn'">btn</button>
      <button @click="show = 'icon'">icon-btn</button>
      <button @click="show = false">hide</button>

      <v-btn v-for="i in 1000" v-if="show === 'btn'" icon="$vuetify" variant="flat" />
      <v-icon-btn v-for="i in 1000" v-if="show === 'icon'" icon="$vuetify" />
    </v-container>
  </v-app>
</template>

<script setup>
  import { computed, ref, watch } from 'vue'

  const show = ref(false)
</script>

[johnleider]

Speed is one of many reasons for a new component. VBtn is tied to routing, groups, extra slots and defaults providers. It's also missing features like active-variant (we've talked about), tracking it's own active state internally and is super ugly to work with when using just icons. It only looks okay within components like VCardActions and VToolbar because they provide a default variant of 'text'.

I think moving VBtn icon's default size to 64px in v3 was ultimately the wrong decision. It lost it's separation from a Floating Action Button and now, in MD3, there is a specification for Icon buttons that's separate from regular buttons.

[johnleider]

The playground causes a layout shift that adds quite a bit of time. can be removed by putting a <br> after the buttons.