Vue3 中方法调用失效的排查与修复方案

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

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

2. 为什么你的代码会报错？

错误 _ctx.stopCountdown is not a function 表示 Vue 找不到该方法。原因通常包括：

1. 使用了 setup()，但没有在 setup() 内部定义并返回这个方法；
2. 或者使用了 <script setup>，但方法定义在了 <script> 的非 setup 区域。

例如在模板中调用了 stopCountdown：

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

3. 解决方案

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

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

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

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

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

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

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

4. 如何统一代码风格？

如果项目中部分页面能用 methods，有些不能用，可能是因为混用了不同风格的组件。

建议：

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

5. 调试技巧

如果仍然报错，检查：

1. 确保没有重复定义：比如同时在 setup() 和 methods 中定义同名方法。
2. 是否误用了 export：不能在 <script setup> 中使用 export default。
3. <script> 标签是否有 setup 属性：

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

总结

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