解构赋值与使用整个对象 - 性能如何？

如何解决解构赋值与使用整个对象 - 性能如何？

解构赋值（在我的 Vue 可组合项目中）是否有任何性能增益/折衷？

例如，我有一个组件可以显示在 vue-i18n 中选择的当前语言。

我可以通过解构来做到这一点：

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

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

或者使用整个对象（函数？）

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

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

其他库或自定义组合（如状态管理）也是如此。在所有教程或示例中，有时使用第一个选项，有时使用第二个选项。这只是自以为是的偏好还是实际上一个比另一个更好？

解决方法

不，解构没有显着的性能影响。它实际上只是语法糖，使代码更加简洁和可读。

编辑：我要补充一点，您通常不应该担心像这样的核心语言功能的性能。担心哪种数据结构最适合特定用例，而不必担心哪种语法表现最佳。如果您或多或少地胜任编码，那么性能优化应该是一个相当不常见的练习，而不是您的首要考虑。编写可读性和可维护性的代码，只有在您发现问题或碰巧知道它很关键时才担心性能。

,

在 JS 中访问对象属性几乎不需要任何时间。是在解构期间执行一次还是在模板中执行多次，这几乎无关紧要。

所以这只是一个偏好问题 - 以及您在模板中使用的同一对象的多少个属性的问题（您的示例只使用一个，但如果使用多个，则有一个单独的 const每一个孩子都不必要地膨胀代码）

,

解构的想法只是使用相关值而不是长点符号。 性能我不认为，但如果您想在值不存在的情况下进行故障安全检查，它会很有用。 如果不解构，另一种方式是 obj?.prp1?.prp2