在Vue3中，setup语法糖是一个新特性。它允许我们在单个件中组合多个项，并且可以在组件的呈现上下文中直接暴露出函数，状态和计算属性等。
在Vue2中，我们必须将组件的选项用各种方法都组织在一起，有时候会显得有些冗长。但是，在Vue3中，我们可以使用setup语法糖来定义组件的逻辑，从而简化组件代码。
(资料图)
setup函数在运行时会接收两个参数，分别为props和context对象。props包含了该组件的所有属性，而context则包含了当前执行环境的上下文信息。
在setup函数内部，我们可以定义响应式数据，方法和计算属性等。这些全都可以在模板内部直接使用，不需要进行额外的处理。
例如，下面是一个使用setup函数来定义件数据和行为的示例：
{{ message }}template><script setup>import { ref } from "vue"const message = ref("Hello, World!")setTimeout(() => {message.value = "Hello, Vue3!"1000)</script>从上面的代码可以出，我们使用import语句导入了Vue3中提供的ref响应式函数，并在setup函数内部创建了名为message的响应式引用对象。然后，我们通过setTimeout定时器来更新message的值，并在模板内部使用它来展示。
总之，setup是一个非常方便和实用的语法糖，它可以帮助我们轻松地定义组件逻辑并暴露出所有需要在模板中使用的数据和行为，提高了Vue3开发的效率和可读性。
除了定义响应式数据、方法和计算属性外，setup函数还可以通过调用inject函数获取父级组件提供的依赖项。这个功能提高了组件的可复用性，因为它允许组件获取其依赖项而不必硬编码它们。
举个例子，我们有一个UserCard组件，它需要获取当前用户的数据。我们可以将用户数据作为依赖项注入到UserCard组件中，方法如下：
// Parent component// UserCard component{{ userData.name }}
{{ userData.age }}, {{ userData.email }}
<script setup>import { inject } from "vue"const userData = inject("userData")</script>在上面的代码中，我们使用inject函数从父级组件中注入名为“userData”的依赖项，并将其保存在组件的userData变量中。然后，我们在模板中使用userData变量来展示用户数据。
最后值得一提的是，Setup语法糖提高了组件代码的可读性和可维护性，尤其是对于复杂的组件来说。它统一了组件选项的风格，同时使得代码更加直观和易于理解。