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> 提供了如下几大优势：
- 简洁明了：减少了模板中的冗余代码，使代码更简洁直观。
- 性能优化：因为它是编译时的宏，避免了运行时的额外开销，提升了性能。
- 类型支持：更好地支持 TypeScript，提升了开发体验和代码质量。
- 一致性：统一了模板语法和逻辑代码，使开发过程更加流畅。
基本用法
使用 <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>
在这个例子中，我们可以看到：
- 引入：引入了 Vue 的
ref方法来创建一个响应式的数据message。 - 定义数据：使用
ref创建了一个响应式的message。 - 定义方法：定义了一个更新消息的方法
updateMessage。 - 模板绑定：在模板中直接使用定义在
<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 开发中的一大亮点。
更多面试题请点击：web前端高频面试题_在线视频教程-CSDN程序员研修院
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
