Vue 3/Nuxt 3 Composition API中导入外部方法的疑问

在Vue 3的Composition API里，导入的工具/库函数的使用方式分两种场景：

1. 使用 <script setup> 语法糖（推荐） #

这种情况下，导入的函数无需额外声明或返回，直接就能在模板和脚本内部使用，是最简洁的方式。

示例：

<script setup>
import { formatDate } from '@/utils/date-utils'
import { debounce } from 'lodash-es'

// 脚本内部直接调用
const handleSearch = debounce((val) => {
  console.log('搜索:', val)
}, 300)
</script>

<template>
  <!-- 模板里直接用导入的函数 -->
  <div>{{ formatDate(new Date()) }}</div>
  <input @input="handleSearch" />
</template>

2. 使用普通的 setup 函数（非语法糖） #

如果用的是传统的选项式API配合setup函数，脚本内部可以直接调用导入的函数，但要在模板中使用的话，必须在setup的返回对象中暴露它——这有点类似Vue 2里把方法放到methods里让模板访问的逻辑，但更灵活。

示例：

<script>
import { formatDate } from '@/utils/date-utils'

export default {
  setup() {
    // 脚本内部直接调用
    const today = formatDate(new Date())
    
    // 要在模板中使用，必须返回
    return {
      formatDate,
      today
    }
  }
}
</script>

<template>
  <div>{{ today }}</div>
  <div>{{ formatDate(new Date('2024-01-01')) }}</div>
</template>

简单总结：

• <script setup>：导入即能用，无需额外操作
• 普通setup函数：脚本内直接用，模板用需返回

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