vue3之composition API 优点

以下完全是vue.js 官方的介绍，可以解决使用过程中对于导入和顶层变量、函数在模板中可以直接使用的理解。

      官方：通过组合式API，我们可以使用导入的API函数来描述组件逻辑。在单文件组件中，组合式API通常会或<scripte setup>搭配使用。这个setup attribute是一个标识，告诉Vue需要在编译时进行一些处理，让我们可以更简洁的使用组合式API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。

下面是使用了组合式 API 与 <script setup> 改造后和上面的模板完全一样的组件：

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

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {
   
   { count }}</button>
</template>