Vue3 组件方法调用失败？可能是 Composition API 暴露方式没写对

Vue3 组件方法调用失败排查：Composition API 暴露机制详解

最近在处理一个 Vue3 项目时遇到了个典型问题：模板里调用的方法突然报错了，提示 xxx is not a function。一开始以为是逻辑写错了，后来排查发现是少加了一个关键属性。

点击按钮后控制台直接报错，说明模板无法找到对应的方法定义。这通常是因为在 Vue3 的 Composition API 中，方法的定义位置和暴露方式与 Options API 不同。

为什么会报错？

错误信息 _ctx.stopCountdown is not a function 很明确：Vue 找不到这个方法。原因主要有两点：

1. 混用了 API 风格：有些页面用的是 Options API（Vue2 传统写法），可以直接在 methods 里定义；而报错的页面可能用了 Composition API，却忘了把方法返回。
2. 脚本标签配置不对：如果用了 <script setup>，方法必须写在 script 内部且自动暴露；如果用普通 <script> 配合 setup() 函数，则必须手动 return。

三种写法对比

为了彻底解决这个问题，我们需要理清 Vue3 的三种主要写法差异。

1. Options API（适合从 Vue2 迁移）

如果你习惯 Vue2 的写法，方法直接放在 methods 对象里即可，不需要额外处理。

export default {
  methods: {
    productSpaceNotice() {
      console.log("方法调用");
    }
  }
}

2. Composition API + setup() 函数

这是 Vue3 早期的标准写法。注意，这里必须在 setup() 内部定义方法，并且通过 return 显式暴露给模板。

export default {
  setup() {
    const productSpaceNotice = () => {
      console.log("方法调用");
    };
    
    // 必须返回才能被模板访问
    return { productSpaceNotice };
  }
}

3.

这是目前最简洁、最推荐的写法。直接在 <script setup> 标签内定义变量或函数，它们会自动暴露给模板，无需 return。

<script setup lang="ts">
// 直接在这里定义，自动暴露给模板
const productSpaceNotice = () => {
  console.log("方法调用");
};
</script>

解决方案建议

根据你的实际代码风格，选择以下对应方案修复报错：

• 统一使用 <script setup>：这是最新推荐写法，所有方法直接定义在 <script setup> 中，不用操心 return。
• 检查 setup() 函数：如果必须用 setup() 函数，确保所有方法都在其中定义并通过 return 暴露。
• 避免混用：尽量不要在一个项目中同时混用 Options API 和 Composition API，容易导致维护混乱。

调试技巧

如果仍然报错，可以按以下步骤检查：

1. 检查重复定义：确保没有在 setup() 和 methods 中同时定义同名方法。
2. 检查 export：不要在 <script setup> 中使用 export default，那是 Options API 的用法。
3. 检查标签属性：确认 <script> 标签是否有 setup 属性。没有的话就是普通脚本，需要手动 return。

写法类型	方法定义位置	是否需要 return	示例
Options API	methods: { ... }	否	Vue2 传统写法
Composition API (setup())	setup() 函数内	是	需要手动 return
<script setup>	直接写在 <script setup> 内	否	最新推荐写法

根据你的习惯，选择一种风格并保持项目一致即可解决问题。