Vue 3.0 的新语法糖 - script setup

2023-11-22 13:26:40

Vue 3.0 中引入了一种新的语法糖 - <script setup>，它允许我们在 SFC 中使用组合式 API 来编写代码。与传统的 <script> 语法相比，<script setup> 具有以下几个优势：

更少的样板内容：<script setup> 语法可以让我们直接在 <script> 标签中编写组合式 API 的代码，而无需像传统方式那样编写额外的 export default 和 setup() 函数。这使得代码更加简洁和易读。
更简洁的代码：<script setup> 语法可以让我们将组件的逻辑和模板代码放在一起编写，这使得代码更加易于维护和理解。
能够使用纯 TypeScript：<script setup> 语法支持纯 TypeScript 语法，这使得我们可以使用 TypeScript 的所有特性来编写组件的逻辑，这使得代码更加健壮和可维护。

如何使用 `<script setup>` 语法

要使用 <script setup> 语法，我们只需要在 SFC 中使用 <script setup> 标签即可。例如：

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

<script setup>
const title = 'Vue 3.0';
const message = 'Hello, world!';
</script>