简介:
<script setup> 是在单文件组件(SFC)中使用组合式 API 的编译时语法糖。相比于普通的<script>语法,它具有更多优势:
-
更少更简洁的代码,不需要使用
return{}
暴露变量和方法了,使用组件时不需要主动注册了 -
更好的
Typescript
支持,使用纯Typescript
声明props
和抛出事件 -
更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。
-
更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
<script setup>语法糖用法
基本语法:
要使用这个语法,在script 中添加setup属性即可。
<script setup></script>
在<script setup>语法糖中以下代码都省略掉了
//在<script setup>语法糖中省略了export default导出,及注册组件,和setup钩子函数
export default { components:{Child},setup() {return { }}
}
案列: