Vue3 Composition API 方法调用失效排查：script setup 暴露机制解析

在 Vue3 项目中，如果模板里调用的方法在运行时提示 _ctx.xxx is not a function，往往是因为方法没有被正确暴露给视图层。这通常发生在混用 Options API 和 Composition API，或者在使用 <script setup> 时遗漏了必要的语法糖特性。

报错现象

点击按钮后控制台抛出错误，例如：

_unwrapProxy is not a function

或者更常见的：

_ctx.stopCountdown is not a function

这意味着 Vue 的响应式上下文找不到你定义的方法。虽然代码逻辑看起来没问题，但作用域或暴露机制出了问题。

核心原因分析

Vue3 支持多种组件写法，不同写法下方法的访问规则完全不同。如果你在其他页面能直接调用 methods 里的函数，说明那是 Options API；而当前报错的页面可能使用了 Composition API，却忘了返回变量。

1. Options API（传统写法）

适合从 Vue 2 迁移过来的项目，方法必须放在 methods 对象中。

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

2. Composition API + setup() 函数

这是标准的组合式写法。在 setup() 内部定义的变量不会自动暴露给模板，必须通过 return 对象导出。

export default {
  setup() {
    const stopCountdown = () => {
      console.log("停止倒计时");
    };
    // 必须返回才能被模板访问
    return { stopCountdown };
  }
};

3.

这是 Vue3 最简洁的写法。顶层定义的变量和方法会自动暴露给模板，无需手动 return。