目录

setup语法糖

创建Vue3项目

setup语法糖的使用

快速生成setup语法糖模板

setup语法糖新增的API

useSlots()和useAttrs()

顶层await

setup语法糖

相信在了解过这篇文章的 setup函数讲解 人会觉得Vue3处理数据变得繁琐了，所有的变量都必须return出来才能使用，为了简化这种书写方式，Vue方法提供了setup语法糖，使用语法糖之后，只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，引入的组件也无需在注册，大大提高了程序员的编程效率。

相比于普通的

import 导入的内容也会以同样的方式暴露。这意味着我们可以在模板表达式中直接使用导入的 add 函数，而不需要通过 methods 选项来暴露它

引入组件无需注册即可使用：

组件的引用应当被理解为像是在引用一个变量，由于组件是通过变量引用而不是基于字符串组件名注册的，在

快速生成setup语法糖模板

为了能够快速使用setup语法糖这里提一下配置语法糖的模板，点击设置，找到配置用户代码片段

点击现有片段，如果之前没有配置过代码片段的人，点击新代码片段即可。

进入配置文件后，将以下代码粘贴进去即可。

"Vue3.2": {"prefix": "v3","body": ["\n","\n",""],"description": "Vue3.2"
}

配置完成后，输入我们设置的快捷键即可快速生成模板，不需要我们再手动去输setup了，是不是很方便！！！

setup语法糖新增的API

Vue3官网给我们提供了3个新增的API，官网地址为：官网地址 。

因为是setup内置的API，所以我们不需要像ref、reactive一样还得导入，直接使用即可。这里我简单的说一下，这几个新增的API的使用：

defineProps()：子组件接收父组件中传来的props。

可以看到我们在修改父组件的 msg 值时，子组件的值也是跟着发送改变的。

上面的是官方的写法，当然新增的API也可以采用如下写法，我个人也是比较推荐， 简洁明了。

defineEmits()：子组件向父组件共享数据方法。

defineExpose()：子组件暴露属性，可以在父组件中拿到。

使用