Vue3单文件组件有哪些新特性？

本文共计2416个文字，预计阅读时间需要10分钟。

目录

一、JavaScript 脚本语言的优点

二、基本语法

三、响应式式

四、使用组件

五、使用自定义指令

六、defineProps 和 defineEmits

七、defineExpose

八、useSlots 和 useAttrs

九、顶层 await

目录

• 一、相比普通script语法的优势
• 二、基本语法
• 三、响应式
• 四、使用组件
• 五、使用自定义指令
• 六、defineProps 和 defineEmits
• 七、defineExpose
• 八、useSlots 和 useAttrs
• 九、顶层 await
• 附：<script setup>和 <script>之间的主要区别
• 总结

一、相比普通script语法的优势

<script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的 <script> 语法，它具有更多优势

• 更少的样板内容，更简洁的代码
• 能够使用纯 Typescript 声明 props 和抛出事件。
• 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
• 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。