使用Script setup有什么用

使用 <script setup> 时，内部 <script setup> 声明的任何顶级绑定（包括变量、函数声明和导入）都可以在模板中直接使用：

<script setup>
 // variable
 const msg = 'Hello!'// functions
 function log() {
   console.log(msg)
 }
 </script><template>
   <button @click="log">{{ msg }}</button>
 </template>

导入以相同的方式公开。这意味着您可以直接在模板表达式中使用导入的帮助程序函数，而不必通过以下 methods 选项公开它：

<script setup>
 import { capitalize } from './helpers'
 </script><template>
   <div>{{ capitalize('hello') }}</div>
 </template>