Vue3 中方法调用提示不存在的问题排查
在 Vue 3 开发过程中，经常遇到模板中调用的方法提示 is not a function 的情况。这通常不是逻辑错误，而是组件编写模式（Options API vs Composition API）与数据暴露方式不匹配导致的。
核心原因分析
Vue 3 支持多种组件定义风格，不同风格下方法的访问权限和暴露机制完全不同：
- Options API：传统写法，方法定义在
methods对象中，自动暴露给模板。 - Composition API (setup 函数)：需要在
setup()内部定义变量，并通过return显式返回才能被模板访问。 - Script Setup 语法糖：最简洁的 Composition API，顶层定义的变量默认自动暴露，无需
return。
如果你的代码混合使用了这些模式，或者在 <script setup> 中忘记定义方法，就会触发运行时错误。
常见错误场景
假设你在模板中这样调用：
<button @click="stopCountdown">停止</button>
如果控制台报错 _ctx.stopCountdown is not a function，请检查以下三种情况：
1. Options API 写法
适用于从 Vue 2 迁移的项目，方法需放在 methods 中。
export default {
methods: {
stopCountdown() {
console.log('方法调用');
}
}
}
2. Composition API + setup() 函数
必须手动 return 才能被模板识别。
export default {
setup() {
const stopCountdown = () => {
console.log('方法调用');
};
// 关键：必须返回方法名
return { stopCountdown };
}
}
