04 在Vue3中使用setup语法糖

概述

Starting from Vue 3.0, Vue introduces a new syntactic sugar setup attribute for the <script> tag. This attribute allows you to write code using Composition API (which we will discuss further in Chapter 5, The Composition API) in SFCs and shorten the amount of code needed for writing simple components.

从 Vue 3.0 开始，Vue 为 <script> 标签引入了一个新的语法糖设置属性。该属性允许您在 SFC 中使用 Composition API编写代码，并缩短编写简单组件所需的代码量。

The code block residing within the <script setup> tag will then be compiled into a render() function before being deployed to the browser, providing better runtime performance.

<script setup> 标签中的代码块在部署到浏览器之前会被编译成 render() 函数，从而提供更好的运行时性能。

To start using this syntax, we take the following example code:

要开始使用这种语法，我们以下面的代码为例：

<script>
import logo from 'components/logo.vue'

export default {
  components: {
    logo
  }
}
</script>

Then, we replace <script> with <script setup>, and remove all the code blocks of export default…. The example code now becomes as follows:

然后，将 <script> 替换为 <script setup>，并删除 export default… 的所有代码块。现在的示例代码如下

<script setup>
import logo from 'components/logo.vue'
</script>

In <template>, we use logo as usual:

在 <template> 中，我们照常使用徽标：

<template>
  <header>
    <a href="mywebsite.com">
      <logo />
    </a>
  </header>
</template>

To define and use local data, instead of using data(), we can declare regular variables as local data and functions as local methods for that component directly. For example, to declare and render a local data property of color, we use the following code:

要定义和使用本地数据，我们可以不使用 data()，而是直接将常规变量声明为本地数据，将函数声明为该组件的本地方法。例如，要声明并呈现颜色的本地数据属性，我们可以使用以下代码：

<script setup>
const color = 'red';
</script>
<template>
  <div>{{color}}</div>
</template>

The preceding code outputs the same result as the example in the previous section –red.

前面的代码输出的结果与上一节的示例相同–red。

As mentioned at the beginning of this section, <script setup> is the most useful when you need to use Composition API within SFCs. Still, we can always take advantage of its simplicity for simple components.

正如本节开头提到的，<script setup> 在需要在 SFC 中使用 Composition API 时最有用。不过，对于简单的组件，我们也可以利用它的简洁性。

NOTE: From this point onward, we will combine both approaches and use <script setup> whenever possible.

注意：从现在起，我们将把两种方法结合起来，尽可能使用 <script setup>。

In the following exercise, we will go into more detail about how to use interpolation and data.

在下面的练习中，我们将详细介绍如何使用插值法和数据。

练习：条件插值

When you want to output data into your template or make elements on a page reactive, interpolate data into the template by using curly braces. Vue can understand and replace that placeholder with data.

当您想在模板中输出数据或使页面上的元素具有反应性时，可使用大括号在模板中插入数据。Vue 可以理解并用数据替换占位符。

Create a new Vue component file named Exercise1-02.vue in the src/components directory.

在 src/components 目录中新建一个名为 Exercise1-02.vue 的 Vue 组件文件。

Inside the Exercise1-02.vue component, let’s add data within the <script setup> tags by adding a function called data(), and return a key called title with your heading string as the value:

在 Exercise1-02.vue 组件中，让我们在 <script setup> 标记中添加数据，添加一个名为 data() 的函数，并返回一个名为 title 的键，其值为标题字符串：

<script>
export default {
  data() {
    return {
      title: 'My first component!',
    }
  },
}
</script>

Reference title by replacing your <h1> text with the interpolated value of {{ title }}:

将 <h1> 文本替换为 {{ title }} 的内插值，从而引用标题：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

修改App.vue，引入组件并渲染：

<script setup>
import Exercise102 from "./components/Exercise1-02.vue";
</script>
<template>
  <Exercise102/>
</template>

When you save this document, the data title will now appear inside your h1 tag.

保存此文档时，数据标题将显示在 h1 标记内。

In Vue, interpolation will resolve any JavaScript that’s inside curly braces. For example, you can transform the text inside your curly braces using the toUpperCase() method:

在 Vue 中，插值将解决大括号内的任何 JavaScript 问题。例如，您可以使用 toUpperCase() 方法转换大括号内的文本：

<template>
  <div>
    <h1>{{ title.toUpperCase() }}</h1>
  </div>
</template>

Interpolation can also handle conditional logic. Inside the data object, add a Boolean key-value pair, isUppercase: false:

插值还可以处理条件逻辑。在数据对象中，添加一个布尔键值对：isUppercase: false：

<script>
export default {
  data() {
    return {
      title: 'My first component!',
      isUppercase: false,
    }
  },
}
</script>

<template>
  <div>
    <h1>{{ isUppercase ? title.toUpperCase() : title }}</h1>
  </div>
</template>

Now, let’s replace <script> with <script setup> and move all the local data declared within the data() function to its own variable names respectively, such as title and isUpperCase, as shown here:

现在，我们将 <script> 替换为 <script setup>，并将 data() 函数中声明的所有本地数据分别移到自己的变量名中，如 title 和 isUpperCase，如下所示：

<script setup>
const title ='My first component!';
const isUppercase = true;
</script>

In this exercise, we were able to apply inline conditions within the interpolated tags ({{}}) by using a Boolean variable. The feature allows us to modify what data to display without overly complicated situations, which can be helpful in certain use cases. We also learned how to write a more concise version of the component using <script setup> in the end.

在本练习中，我们可以使用布尔变量在插值标记（{{}}）中应用内联条件。这一功能让我们可以修改要显示的数据，而不必考虑过于复杂的情况，这在某些用例中很有帮助。最后，我们还学会了如何使用 <script setup> 编写更简洁的组件版本。

Since we are now familiar with using interpolation to bind local data, we will move on to our next topic – how to attach data and methods to HTML element events and attributes using Vue attributes.

既然我们现在已经熟悉了使用插值绑定本地数据，那么我们将进入下一个主题–如何使用 Vue 属性将数据和方法附加到 HTML 元素事件和属性上。