Vue3 setup()中哪些内容需直接声明，哪些可放在return对象内？

结论 #

你给出的第二种写法存在作用域错误，无法正常运行，functionUsingRefs执行时会直接抛出ReferenceError: a is not defined的异常。

原因说明 #

这是JavaScript本身的作用域规则决定的，和Vue无关：你在return的对象字面量中定义的a: ref(0)，a是返回对象的属性，不属于setup函数的顶层作用域变量，同一个对象内的其他方法在执行时，无法直接通过变量名a访问到这个属性。且setup函数执行阶段组件实例尚未初始化完成，即便你尝试用this.a访问，此时this指向为undefined，依然无法获取到值。

核心问题解答 #

只要你需要在setup内部的逻辑（包括返回的函数、watch监听、computed计算属性、onMounted等生命周期钩子）中引用某个变量/函数，就必须把它声明在setup的顶层作用域中，不能仅作为返回对象的属性定义。

优化建议 #

如果你觉得第一种写法需要先声明再return比较冗余，可以直接使用Vue官方提供的<script setup>语法糖，所有在顶层声明的响应式变量、函数都会自动暴露给模板，无需手动写return语句，代码更精简，也能规避上述作用域问题。

如果是习惯把函数写在return里的写法，只要保证引用的变量已经在顶层提前声明，就是合法可用的，示例：

setup() {
  // 响应式变量提前在顶层声明
  const a = ref(0)
  return {
    a,
    standaloneFunction() { return 5 },
    functionUsingRefs() { return 10 * a.value }
  }
}

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