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

For example I have ponent 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 posables (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?

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

For example I have ponent 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 posables (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?

• javascript
• vue.js
• ecmascript-6
• vuejs3
• vue-i18n

3 Answers 3

No, there is no significant performance implication of destructuring. It's really just syntactic sugar that makes code more concise and readable.

EDIT: I'm going to add the remark that you should not in general be worrying about the performance of core language features like this. Worry about which data structure is best for a particular use case, don't worry about what syntax performs best. If you are coding more or less petently, then performance optimization should be a fairly unmon exercise and not your first consideration. Code for readability and maintainability and only worry about performance when you notice it's a problem or happen to know that it's critical.

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)

The idea of a de-structure is just to use the relevant value instead of long dot notations. Performance I do not think, but it is useful if you want to put a fail safe check if the value is not present. The other way if not de-structure would be obj?.prp1?.prp2