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 };
  }
}