Vue3中如何让$forceUpdate作用于组件插槽内容？

你的问题根源在于$forceUpdate仅能触发当前组件的重渲染，但嵌套组件（比如router-link）的插槽内容未被响应式系统追踪，因此无法同步更新。正确的做法是让$t函数内部依赖一个响应式的语言状态，这样所有调用$t的地方都会自动响应语言变化，无需手动强制更新。

具体实现步骤 #

1. 在国际化服务中维护响应式语言变量
   用Vue的ref创建响应式的当前语言状态，所有语言切换操作都更新这个变量。
2. 让$t函数隐式依赖该响应式变量
   每次调用$t时读取这个响应式变量，Vue的响应式系统会自动追踪依赖关系。
3. 移除组件中的$forceUpdate逻辑
   无需再订阅语言变化事件调用$forceUpdate，响应式系统会自动处理更新。

国际化服务代码示例 #

// src/services/i18n.js
import { ref, watch, provide, inject } from 'vue';

// 响应式当前语言
const currentLocale = ref('en');

// 模拟翻译字典
const translationMap = {
  en: { foo: 'Hello', bar: 'Go to Page 1' },
  zh: { foo: '你好', bar: '前往页面1' }
};

// 语言服务实例
const $locale = {
  // 保留原有onChanged接口（兼容旧代码）
  onChanged(callback) {
    watch(currentLocale, callback);
  },
  // 设置语言的方法
  setLocale(lang) {
    if (translationMap[lang]) {
      currentLocale.value = lang;
    }
  }
};

// 翻译函数，保持原有签名不变
const $t = (key) => {
  // 读取响应式变量，触发依赖追踪
  const translations = translationMap[currentLocale.value];
  return translations?.[key] || key;
};

// 全局提供服务的方法（在main.js中调用）
export function provideI18n() {
  provide('$my-locale-service', $locale);
  provide('$my-translate-service', $t);
}

// 供组件注入的方法
export function useI18n() {
  return {
    $locale: inject('$my-locale-service'),
    $t: inject('$my-translate-service')
  };
}

组件中使用示例 #

<script setup>
import { useI18n } from '@/services/i18n';
const { $t, $locale } = useI18n();

// 切换语言示例
const switchLang = () => {
  $locale.setLocale(currentLocale.value === 'en' ? 'zh' : 'en');
};
</script>

<template>
  <button @click="switchLang">切换语言</button>
  <span>{{ $t('foo') }}</span>
  <router-link to="page1">{{ $t('bar') }}</router-link>
</template>

方案优势 #

• 响应式系统会自动追踪所有调用$t的位置，包括router-link的插槽内容，语言变化时这些区域都会自动更新。
• 完全保留$t的原有签名，不需要修改任何组件中$t的调用方式。
• 不会丢失组件内部状态，因为没有重新创建组件实例，仅更新响应式依赖的文本内容。

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