">

详解vue3.2中setup语法糖

我们有我们的模板（一个简单的表单）和我们的脚本块。在脚本块中，我们导出一个具有三个键的对象：名称、计算和方法。如果你熟悉 Vue，这对你来说应该很熟悉。现在，让我们切换此代码以使用 Composition API。

我们的组件做的事情和以前完全一样。我们定义了状态（名称）、计算属性（isNamePresent）和提交函数。如果其中任何一个不熟悉，请查看我之前关于 Vue Composition API 的文章。我们不必在要导出的对象中搭建我们的应用程序，而是可以根据需要自由定义变量。这种灵活性还允许我们根据需要从组件中提取重复的逻辑，但在这种情况下，我们的组件非常简单。

但是，我们仍然有那个尴尬的export default说法。我们的代码都存在于 setup 函数中，而其余的实际上只是样板文件。我们不能直接删除它吗？事实上，我们现在可以！这就是

让我们来看看这里发生了什么变化。首先，我们在脚本标签中添加了“setup”这个词，这为编写 Vue 组件启用了这种新模式。其次，我们从setup函数中获取我们的代码，并仅用我们的代码替换我们现有的导出对象。一切都按预期工作！

请注意，在脚本标签中声明的所有内容都在组件的模板中可用。这包括非反应性变量或常量，以及实用函数或其他库。这样做的主要好处是您不需要手动将外部文件（例如，Constants.js）绑定为组件的值 - Vue 现在会为您处理这个问题。

基本语法

要选择加入语法，请将该属性添加到块中：setup``

内部代码被编译为组件函数的内容。这意味着与正常不同，普通仅在首次导入组件时执行一次，每次创建组件的实例时，内部代码都会执行。setup()

顶级绑定向模板公开# 使用 时，其中声明的任何顶级绑定（包括变量、函数声明和导入）都可以直接在模板中使用：

进口以同样的方式公开。这意味着您可以在模板表达式中直接使用导入的帮助程序函数，而不必通过以下选项公开它：methods

Reactivity

需要使用Reactivity API 显式创建响应式状态。与从函数返回的值类似，在模板中引用 ref 时会自动解开包装：setup()

定义组件

使用时

而已！我们的组件现在必须导入到我们的 Vue 文件中，并且它会自动在我们的模板中可用。不再有components块占用我们文件中的空间！

现在，我们需要将name子组件作为道具传递给我们。但是等等，我们不能定义道具！我们没有要添加 props 选项的对象！此外，我们需要发出表单已提交，以便我们可以触发我们的提交。我们如何定义子组件发出的内容？

defineProps和defineEmits 我们仍然可以使用新的辅助方法defineProps和defineEmits. 来自 Vue 文档，“defineProps并且defineEmits是编译器宏，只能在内部使用

让我们来看看这里发生了什么变化。

首先，我们曾经defineProps期望一个 modelValue（在 Vue 3 中与 v-model 一起使用的预期道具）。 然后我们用 定义了我们的发射defineEmits，这样我们既可以报告这个组件发射的内容，也可以访问该emit函数（以前在 `this.$emit 上可用）。 接下来，我们创建一个使用自定义 getter 和设置的计算属性。我们这样做是为了可以轻松地在表单输入中使用 v-model，但这不是必需的。getter 返回我们的 prop，setter 将更新事件发送到我们的父组件。 最后，我们连接了 submitHandler 函数来发出一个提交事件。 我们的 App.vue 组件或多或少与我们离开它时一样，添加v-model="name"了@submit="submitForm"Form 子组件。这样，我们的应用程序再次按预期工作！

其它功能 这里有更多功能可供我们使用，但它们在典型应用程序中的用例较少。

动态组件- 由于我们的组件在模板中立即可用，我们可以在编写动态组件时使用它们（例如）。 命名空间组件- 如果您有许多从同一文件导入的组件，则可以使用import * as Form语法对这些组件进行命名空间。然后，您无需任何额外工作即可访问或。 Top-Level Await - 如果您需要将 API 请求作为组件设置的一部分，您可以在组件的顶层自由使用 async/await 语法 - 无需包装在 async 函数中！请记住，使用它的组件必须由组件在外部包裹

要记住的另一点是，您并没有被锁定在使用

你可能感兴趣的:(详解vue3.2中setup语法糖