vue3 中的script setup

script setup

<script setup>是 Vue3 新出的语法糖，类型是Vue的Git RFC中的建议。需要明确的是，这并不是要完全替代任何当前写法。其目的是为开发人员提供更简洁的语法，简化使用Composition API时冗长的模板代码，以编写其单个文件组件。

在不使用 <script setup>, 我们代码是：

<template>
    <h1 v-text="count"></h1>
    <p v-text="double"></p>
    <button @click="add">count++</button>
</template>

<script>
    import { ref, unref, computed } from 'vue';
    export default {
      setup() {
        const count = ref(1);
        const double = computed(() => unref(count) * 2);
        function add() {
          count.value++;
        }
        return {
          count,
          double,
          add
        }
      }
    }
</script>

当我们需要引入一个 components 时，不仅需要在文件头部显式 import</