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

Question

下面的代码运行良好。当我们更改语言时，文本会正确更新，这要归功于ref

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

return {
  mainNavigationLinks,
}

但我们真正想要的是将mainNavigationLinks作为reactive对象，这样我们就可以在数组中添加和删除项，并通过在array中使用ref让Vue使用正确的转换相应地更新组件。根据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')) },
])

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

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

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