Vue3 中模板调用方法提示不存在的排查与修复

提示报错

运行时，文本框应该会有个默认值，此时是空的没有初始化到值。

点击开始或者停止按钮，提示方法不存在。

问题分析

在 Vue 3 的 Composition API 中，有几种不同的方式来定义方法，是否必须放在 setup() 中取决于组件编写方式。

Options API vs Composition API 风格差异

如果你的其他页面能直接在外面定义方法，很可能是使用了 Options API 风格（Vue 2 的传统写法），而报错的页面可能是用了 Composition API 风格（<script setup> 或 setup() 函数）。

Options API 写法（方法直接放在外面）

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

Composition API 写法（方法必须在 setup 中定义）

export default {
  setup() {
    const stopCountdown = () => {
      console.log("方法调用");
    };
    return { stopCountdown };
  }
}

<script setup> 语法糖（最简洁的 Composition API）

<script setup lang="ts">
const stopCountdown = () => {
  console.log("方法调用");
};
</script>

为什么你的代码会报错？

错误 _ctx.stopCountdown is not a function 表示：

• Vue 找不到这个方法，因为：
  1. 如果你用了 setup()，但没有在 setup() 内部定义并返回这个方法；
  2. 或者你用了 <script setup>，但方法定义在了 <script> 的非 setup 区域。

你在模板中调用了 stopCountdown，比如：

<button @click="stopCountdown">按钮</button>

解决方案

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

方案 1：改用 Options API（适合从 Vue 2 迁移的代码）

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

方案 2：Composition API + setup() 函数

export default {
  setup() {
    const stopCountdown = () => {
      console.log("方法调用");
    };
    return { stopCountdown };
  }
}

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

<script setup lang="ts">
const stopCountdown = () => {
  console.log("方法调用");
};
</script>

如何统一代码风格？

如果你的项目中有些页面能用 methods，有些不能用，可能是因为：

1. 部分组件用了 <script setup>，部分用了 setup() 函数，部分用了 Options API。
2. 依赖的 Vue 版本或构建工具配置不一致。

建议：

• 统一使用 <script setup>（最新推荐写法），所有方法直接定义在 <script setup> 中。
• 如果必须用 setup() 函数，确保所有方法都在其中定义并通过 return 暴露。
• 避免混用 Options API 和 Composition API。

调试技巧

如果仍然报错，检查：

1. 确保没有重复定义：比如同时在 setup() 和 methods 中定义同名方法。
2. 是否误用了 export：

// 错误！不能在 <script setup> 中用 export default
export default { methods: {...} }

3. <script> 标签是否有 setup 属性：

<script setup> // 正确
<script> // 错误（除非用 Options API）

总结

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

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