ref 在反应式数组对象中不再反应式

Question

以下代码可以正常工作。当我们更改语言时，由于ref，文本会正确更新：

const mainNavigationLinks = computed(() => [
  { label: context.root.$t('navigationMenu.home') },
  { label: context.root.$t('navigationMenu.tickets') },
])

return {
  mainNavigationLinks,
}

但我们真正想要的是将mainNavigationLinks 作为reactive 对象，这样我们就可以在数组中添加和删除项目，并让Vue 使用ref 使用正确的翻译相应地更新组件在array 内。根据Vue docs，这应该是可能的

但是，当我们尝试下面的代码时，我们发现标签不再是反应性的：

const mainNavigation = reactive([
  { label: context.root.$t('navigationMenu.home') },
  { label: context.root.$t('navigationMenu.tickets') },
])

const mainNavigationLinks = computed(() => mainNavigation)

为了能够将项目添加到数组并仍然具有反应性，我们在这里缺少什么？感谢您的帮助。

Answer 1

看起来你想要的是让数组是反应式的，但数组中的项目是计算属性。

const mainNavigation = reactive([
  { label: computed(() => context.root.$t('navigationMenu.home')) },
  { label: computed(() => context.root.$t('navigationMenu.tickets')) },
])

或者，只要每个label 属性都引用一个您必须调用的函数，您就可以在此处完全不使用computed：

const mainNavigation = reactive([
  { label: () => context.root.$t('navigationMenu.home') },
  { label: () => context.root.$t('navigationMenu.tickets') },
])

这是主要思想：每个label 都需要在使用时进行评估，这就是为什么它必须是computed 属性（您可以从缓存中受益）或函数。您的代码不起作用，因为您在构造数组时会立即获得标签翻译。