Vue3组合式API中onMounted钩子内部分变量无法访问的原因

第一个代码正常运行的原因 #

你用ref('')创建的foo是响应式变量，Vue会对它做特殊包装处理：

• ref返回的是一个包含value属性的包装对象，Vue会自动追踪这个value的变化
• 当onMounted钩子中修改foo.value = 'bar'时，Vue能检测到这个变更，立刻触发模板重新渲染，页面就会显示bar
• 模板里可以直接写{{ foo }}，Vue会自动解包ref的value值，不用手动写foo.value

第二个代码失效的核心原因 #

1. 普通变量没有响应式能力 #

你声明的let foo;是纯JavaScript普通变量，Vue不会对它做任何响应式追踪。哪怕在onMounted里把foo赋值为'bar'，Vue也感知不到这个变量的变化，自然不会更新模板里的{{ foo }}，页面始终显示空值。

2. 钩子内部变量的作用域限制 #

如果在onMounted的回调函数里声明变量（比如let foo = 'bar'），这个变量属于回调的局部作用域，只能在回调内部访问，<script setup>顶层和模板根本拿不到它——这是JavaScript的基础作用域规则，和Vue无关。

补充：让普通变量生效的正确方式 #

如果不想用ref，也可以通过reactive或者手动触发更新，但最符合Vue3规范的做法还是用响应式API（ref/reactive）声明需要在模板中使用的变量。比如把第二个代码改成响应式写法：

<template>
  <h1>{{ foo }}</h1>
</template>

<script setup>
import { ref, onMounted } from "vue";

const foo = ref(); // 可先不赋初始值

onMounted(() => {
  foo.value = 'bar';
});
</script>

内容的提问来源于stack exchange，提问作者Douglas Jordão