Destructuring assignment vs using whole object - what about performance?

Question

Does destructuring assignment (in my case with Vue composables) has any performance gain/tradeoff?

For example I have component that displays current language choosed in vue-i18n.

I can do this with destructuring:

<template>
  <span>locale: {{ locale }}</span>
</template>

<script setup>
  import { useI18n } from 'vue-i18n'
  const { locale } = useI18n()
</script>

Or by using whole object (function?)

<template>
  <span>locale: {{ i18n.locale.value }}</span>
</template>

<script setup>
  import { useI18n } from 'vue-i18n'
  const i18n = useI18n()
</script>

Same goes with other libraries or custom composables (like state management). In all tutorials or examples sometimes first option is used, and sometimes second. Is this just opinionated preference or actually one is better from another one?

Answer 1

Accessing object properties does barely take any time in JS. It barely matters if you do this once during destructuring, or multiple times in the template.

So it's just a matter of preference - and a matter of how many properties of the same object you use in the template (your example only ever uses one, but if multiple are used, having a seperate const for every single one kide of bloates the code unnecessarily)