Vue3 setup返回的变量在组件其他部分报错找不到如何解决？

问题原因 #

该报错是JavaScript作用域规则和Vue组件实例的属性挂载逻辑共同导致的：

• 官方文档提及的「setup 返回的所有内容都可在组件的其余部分使用」，指的是返回值会挂载到组件实例上，并非暴露为当前模块的全局变量
• methods 中的函数要访问组件实例的属性，必须通过this调用，你直接在increment方法里写c，TS会从当前函数作用域向上逐层查找变量c的定义，遍历到全局作用域都找不到对应声明，自然抛出Cannot find name 'c'.ts(2304)报错
• 额外说明：defineComponent 本身会自动将setup返回的属性合并到组件实例的类型定义中，只要访问方式正确，TS可以正确推导属性类型，不会出现类型报错。

解决方法 #

方法1：methods内通过this访问组件实例属性 #

直接修改increment方法的访问方式即可，代码示例：

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup(props) {
    let c = 123;
    return { c }
  },
  methods: {
    increment() {
      // 从组件实例上获取setup返回的c
      console.log(this.c)
    }
  }
})
</script>

方法2：逻辑全部迁移到setup内（更推荐） #

既然已经使用了组合式API的setup选项，不需要再混合使用选项式的methods配置，直接在setup内定义方法即可，既能避免this相关的问题，TS类型推导也更顺畅：

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup(props) {
    // 如果c需要响应式能力，用ref包裹
    const c = ref(123);
    const increment = () => {
      // 同作用域下可直接访问变量，无需this
      c.value++
    }
    return { c, increment }
  }
})
</script>

该写法符合Vue3组合式API的最佳实践，可维护性更高。

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