vue3中＜script setup＞和setup函数的区别是什么

setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的

• 声明无法在 setup> 中声明的选项，例如 inheritAttrs 或插件的自定义选项。

• 声明模块的具名导出 (named exports)。

• 运行只需要在模块作用域执行一次的副作用，或是创建单例对象

<script>
// 普通 <script>, 在模块作用域下执行 (仅一次)
runSideEffectOnce()
// 声明额外的选项
export default {
  name:'header',
  inheritAttrs: false,
  customOptions: {}
}
</script>
<script setup>
// 在 setup() 作用域中执行 (对每个实例皆如此)
</script>

九、顶层的 await

setup> 中可以使用顶层 await。结果代码会被编译成 async setup()

<script setup>
const post = await fetch('https://api.com').then((r) => r.json())
</script>

另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。

十、限制 setup> 使用src属性

由于模块执行语义的差异， setup> 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候，对于开发者和工具来说都会感到混乱。因此， setup> 不能和 src attribute 一起使用。

以上就是vue3中＜script setup＞和setup函数的区别是什么的详细内容，更多请关注其它相关文章！