在 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。


