使用script setup语法糖优化你的vue3代码

注意：本文章写于setup语法糖早期提出阶段，如今部分用法已经更改，最新的用法请以官方最新提案为主。

请移步官方文档? ? ?https://v3.vuejs.org/api/sfc-script-setup.html[这里是图片001]https://v3.vuejs.org/api/sfc-script-setup.html

script setup是vue3中新引入的语法糖，目的是简化使用Composition API时冗长的模板代码。

例如：

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { MyButton } from '@/components'

export default defineComponent({
  components: {
    MyButton
  },
  props: {
      name: String
  },
  setup() {
    const count = ref(0)
    const inc = () => count.value++

    return {
      count,
      inc,
    }
  },
})
<script>

可见，当我们需要引入一个