Vue3中直接导入自定义函数报错‘x is not a function’原因咨询

Vue3的模板在渲染时，只会从**组件实例的上下文（_ctx）**里查找可调用的方法和变量，这个上下文仅包含你在组件选项（比如data、methods、computed）中定义的内容，或是<script setup>里声明的顶层变量/函数。

为什么直接导入的函数用不了？ #

• 你从support.js直接导入的hello函数是模块级别的变量，它并没有被挂载到组件实例上。模板里调用hello("world")时，Vue会去组件实例的上下文里找这个函数，自然找不到，就会抛出_ctx.hello is not a function的错误。
• 至于this.hello()无效：如果用的是选项式API，this指向组件实例，但导入的函数不在实例上；如果用的是<script setup>，这里的this根本不指向组件实例，所以两种情况都调用不到。

为什么封装到methods里就可以？ #

当你把导入的hello函数封装到组件的methods中后，这个方法会被Vue自动挂载到组件实例上，成为渲染上下文的一部分，模板自然就能正常调用hello_local()了。

额外解决办法（无需封装到methods） #

如果用的是<script setup>语法，只要导入和导出写法正确，直接导入的函数就能在模板里调用，不用放到methods里：

// support.js
export function hello(name) {
  return `Hello ${name}!`
}

// view.vue
<script setup>
import { hello } from './support.js'
</script>

<template>
  {{ hello("world") }} <!-- 可直接调用 -->
</template>

如果用的是选项式API，也可以把导入的函数放到computed或data里，但最规范的方式还是放到methods中。

内容的提问来源于stack exchange，提问作者chimpsociety