Vue3 方法调用报错“不存在”？多半是少写了这个属性

为什么你的代码会报错？

当你看到 _ctx.xxx is not a function 时，通常有以下几种情况：

1. 混用了写法：部分组件用 setup()，部分用 <script setup>，甚至混入 Options API，导致作用域不一致。
2. 忘记返回：在标准 setup() 中定义了方法，但忘了在 return 对象里包含它。
3. 脚本标签缺失：使用了 <script setup> 但没有加 setup 属性，或者在非 setup 区域定义了方法。

例如，如果你在模板里写了 <button @click="stopCountdown">，但 stopCountdown 既不在 methods 里，也没在 setup 的 return 中，或者没写在 <script setup> 里，就会报这个错。

解决方案

根据你的项目现状，选择以下一种方案统一即可：

方案 1：改用 Options API

适合从 Vue 2 迁移过来的老项目，或者不想引入 TS 语法的场景。

export default {
  methods: {
    stopCountdown() {
      // 直接在这里定义
      console.log("方法调用");
    }
  }
}

方案 2：Composition API + setup()

需要严格遵循 Vue 3 规范，但不想使用语法糖的场景。

export default {
  setup() {
    const stopCountdown = () => {
      // 在 setup 内定义
      console.log("方法调用");
    };
    return { stopCountdown }; // 必须返回
  }
}

方案 3：<script setup> 语法糖（推荐）

新项目首选，代码量最少，类型推导友好。

<script setup lang="ts">
// 直接在这里定义，无需 return
const stopCountdown = () => {
  console.log("方法调用");
};
</script>

调试技巧

如果仍然报错，请检查以下几点：

1. 避免重复定义：不要在 setup() 和 methods 中同时定义同名方法。
2. 检查 export：在 <script setup> 中不要写 export default，那是 Options API 的写法。
3. 确认标签属性：确保 <script> 标签上有 setup 属性，即 <script setup>。

总结

保持项目风格一致是关键。建议统一使用 <script setup>，这样能最大程度减少此类作用域问题。