Vue 3 中的新 <script setup> 语法详解

Vue.js 作为现代前端框架的一大代表，它简洁易用的特性和不断创新的理念吸引了一大批开发者。在 Vue 3 中推出了很多改进和新特性，其中一个引起广泛关注的便是 <script setup> 语法。这篇文章将详细介绍 Vue 3 中的 <script setup> 语法，包括其用法、优势以及具体的示例代码。

什么是 <script setup>？

在 Vue 3 中，<script setup> 是一种编写 Vue 组件的新方式，它可以让开发者以更加简洁、直接的方式来书写组件脚本部分。与传统的 <script> 不同，<script setup> 是一种编译时的宏，意味着它在编译时被特殊处理，从而带来了更好的性能和开发体验。

为什么使用 <script setup>？

<script setup> 提供了如下几大优势：

1. 简洁明了：减少了模板中的冗余代码，使代码更简洁直观。
2. 性能优化：因为它是编译时的宏，避免了运行时的额外开销，提升了性能。
3. 类型支持：更好地支持 TypeScript，提升了开发体验和代码质量。
4. 一致性：统一了模板语法和逻辑代码，使开发过程更加流畅。

基本用法

使用 <script setup> 非常简单，首先我们创建一个 Vue 组件，并将脚本部分更改为 <script setup>，如下所示：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">点击更新</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('Hello Vue 3!')

function updateMessage() {
  message.value = 'Message updated!'
}
</script>

在这个例子中，我们可以看到：

1. 引入：引入了 Vue 的 ref 方法来创建一个响应式的数据 message。
2. 定义数据：使用 ref 创建了一个响应式的 message。
3. 定义方法：定义了一个更新消息的方法 updateMessage。
4. 模板绑定：在模板中直接使用定义在 <script setup> 中的 message 和 updateMessage。

非常简洁明了，完全没有冗余的代码。

使用 Composition API

<script setup> 本质上是为 Composition API 设计的，这使得在使用 Composition API 时变得更加简洁，我们再来一个实际的示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}

const doubleCount = computed(() => count.value * 2)
</script>

响应式数据和计算属性

在这个示例中，我们使用了 ref 创建了一个响应式数据 count，并定义了一个 increment 方法来更新它。同时，我们还定义了一个 computed 计算属性 doubleCount，它会根据 count 的值自动计算：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}

const doubleCount = computed(() => count.value * 2)
</script>

这里我们在模板中展示了 count 和 doubleCount，并在按钮的点击事件中调用 increment 方法。可以看到，使用 <script setup> 后，代码显得更加整洁直观。

使用 Props 和 Emits

<script setup> 还支持直接声明 props 和 emits，这让我们在组件间传递数据变得更方便：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script setup>
defineProps(['message'])
defineEmits(['update'])

const handleClick = () => {
  emit('update', 'New Message')
}
</script>

在上述代码中，我们使用 defineProps 和 defineEmits 来声明组件的 props 和 emits。这样一来，我们可以在组件中直接访问 props，同时也可以触发事件并传递数据。

TypeScript 支持

<script setup> 还提供了对 TypeScript 的完美支持，这可以大大提高我们的开发体验：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

type Props = {
  message: string
}

const props = defineProps<Props>()
</script>

在这个示例中，我们使用 TypeScript 声明了 Props 类型，并在 defineProps 中使用它，使得 props 具有了类型提示和检查。

总结

Vue 3 中的新 <script setup> 语法为我们在编写 Vue 组件时提供了更简洁高效的方式。无论是响应式数据、计算属性、props 和 emits 的使用，还是对 TypeScript 的支持，它都大大简化了我们的开发工作。相信随着 Vue 3 的普及，<script setup> 语法会成为 Vue 开发中的一大亮点。