vue全家桶进阶之路41：Vue3 语法糖<script setup>

<script setup> 是 Vue 3 中的一种语法糖，它可以使组件的脚本更加简洁、易读，并且减少了一些样板代码。使用 <script setup>，你可以将组件的 props、data、computed、methods 等所有逻辑都写在一个地方，而不需要分别写在不同的区块。

以下是一个使用 <script setup> 的例子：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

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

  const message = ref('Hello, world!')

  function increment() {
    message.value += '!'
  }
</script>

可以看到，使用 <script setup>，我们不需要再像之前一样分别定义 props、data、methods 等，而是将它们都放在了一个区块中，从而使代码更加简洁易读。

需要注意的是，<script setup> 中的变量会自动被声明为响应式数据。因此，我们可以直接在模板中使用它们，而不需要使用 computed 或 watch 来手动实现响应式。

 

<script setup>和<script>的差别: 

<script setup> 是 Vue 3 中的新特性，它是一种简化和更具声明性的语法，用于编写组件的逻辑部分。相比之下，<script> 是 Vue 2 中常用的编写组件逻辑的方式。

下面是 <script> 和 <script setup> 的一些主要差别：

1. 语法简洁性：<script setup> 的语法更为简洁。它使用了更少的代码来实现相同的功能，减少了冗余的代码量。
2. 自动引入：在 <script setup> 中，不需要手动导入组件选项（如props、emit 等），它们会被自动引入和解构。这样可以更轻松地使用这些选项，而无需显式声明它们。
3. 作用域自动推断：<script setup> 在编写组件逻辑时可以自动推断变量的作用域，不需要像 <script> 那样显式声明 ref 或 reactive 变量。
4. 单文件组件：<script setup> 对于单文件组件的编写更加方便和简洁，减少了重复的代码，提高了开发效率。
5. 更好的性能：由于 <script setup> 具有更高效的编译器优化，它可以提供更好的性能。

虽然 <script setup> 在编写组件逻辑时具有许多优势，但它并不适用于所有情况。对于复杂的组件逻辑或需要更精细控制的情况，仍然可以使用传统的 <script> 语法。