Vue3+TypeScript中ref无法响应locale更新，必须用computed吗？

为什么ref定义的属性无法响应更新？ #

当你用ref初始化locale和content时，只是把初始化时刻的i18nLocale.locale.value和props.item.content[locale.value]的值赋值给了ref的初始值，并没有建立任何响应式依赖关系。后续i18nLocale.locale.value变化时，ref的value不会自动同步——因为ref本身只是一个存储值的容器，不会主动追踪外部变量的变化。

为什么computed可以正常响应？ #

computed是Vue专门设计的响应式计算属性，它会自动追踪内部用到的所有响应式依赖（比如i18nLocale.locale.value、props.item）。当这些依赖发生变化时，computed会自动重新计算并返回新值，同时还会做结果缓存，只有依赖变化时才会重新执行，性能更优。

必须用computed吗？ #

不是必须，但computed是最简洁、符合Vue设计理念的最优方案。如果一定要用ref实现，需要手动通过watch监听依赖变化来更新ref的值，示例代码如下：

const locale = ref(i18nLocale.locale.value as unknown as Locales);
const content = ref(props.item.content[locale.value]);

// 监听i18n locale变化，同步更新locale ref
watch(i18nLocale.locale, (newLocale) => {
  locale.value = newLocale as unknown as Locales;
});

// 监听locale和props.item变化，更新content ref
watch([() => locale.value, () => props.item], ([newLocale, newItem]) => {
  content.value = newItem.content[newLocale];
}, { deep: true }); // 因为props.item是对象，需要开启深度监听

但这种写法比computed繁琐得多，还需要手动处理深度监听等细节，所以更推荐直接使用computed。

内容的提问来源于stack exchange，提问作者Raphael Rlt