watchEffect 不处理多环境配置或自动参数注入，仅响应式追踪并执行副作用函数；环境变量需由构建工具提前注入为静态常量，若需动态切换（如 API 模式），应封装为 ref/reactive 状态供其监听。
watchEffect 本身不处理多环境配置或自动参数注入——它只负责响应式地追踪并执行副作用函数。所谓“多环境配置的自动参数注入”，实际是工程化配置（如 Vite 的 import.meta.env、Webpack DefinePlugin 或运行时配置加载）与业务逻辑组织的问题，watchEffect 只可能在后续逻辑中消费这些参数。
多环境变量需提前注入，而非由 watchEffect 提供
Vue 3 应用启动前，环境变量已由构建工具注入为静态常量：
- Vite 中通过
.env.[mode]文件定义，编译时替换为import.meta.env.VUE_APP_API_BASE - 这些值不是响应式数据，不能被 watchEffect 追踪（因为它们不是 ref、reactive 或 computed）
- 若需动态切换环境（如测试时手动切 mock 开关），应把该开关封装为 ref 或 reactive 状态，再由 watchEffect 监听
watchEffect 可监听“环境感知状态”，触发对应行为
例如：你有一个可切换的 API 模式（prod / mock / local），用 ref 管理，watchEffect 可据此重置请求客户端或更新日志前缀：
const apiMode = ref<'prod' | 'mock' | 'local'>('prod')
watchEffect(() => {
// 根据当前模式设置 axios 实例 baseURL
apiClient.defaults.baseURL =
apiMode.value === 'mock'
? import.meta.env.VUE_APP_MOCK_API
: import.meta.env.VUE_APP_API_BASE
console.log(`[ENV] API mode switched to: ${apiMode.value}`)
})
注意：这里真正被追踪的是 apiMode，不是 import.meta.env —— 后者只是普通字符串，仅在函数内被读取一次。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
避免常见陷阱：异步加载配置时的依赖丢失
若环境配置需运行时拉取（如从远程 config.json 加载），不能直接在 watchEffect 异步回调中读取新配置属性，否则会漏追踪：
- ❌ 错误写法：在 await 后才访问
config.value.timeout→ 不会被追踪 - ✅ 正确做法：把远程配置结果存入 ref，并在同步阶段读取它；或使用 watch 配合 onMounted 显式控制加载与监听时机
配合 provide/inject 实现跨组件环境上下文
当多个子组件需要共享当前环境参数（如 feature flags、调试开关），可用 provide 注入一个 reactive 配置对象，再用 watchEffect 在子组件中响应其变化：
// 父组件 setup
const envConfig = reactive({
enableAnalytics: true,
debugMode: import.meta.env.DEV
})
provide('envConfig', envConfig)
// 子组件
const env = inject<typeof envConfig>('envConfig')
if (env) {
watchEffect(() => {
console.log('Debug mode is now:', env.debugMode)
// 触发调试面板显隐、埋点开关等
})
}
这样既保持了环境配置的集中管理，又让子组件能响应式联动。
