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

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

请移步官方文档     https://v3.vuejs.org/api/sfc-script-setup.htmlhttps://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>

可见，当我们需要引入一个components时，不仅需要在文件头部显式import进行导入，而且需要components字段加入声明。不仅如此，在setup中声明的变量如果需要被模板使用，那么需要在setup的尾部显式return返回，如果你的组件模板使用的变量不多，那么这种情况还可以勉强接受。但是当你的变量和方法逐渐增加时，每次都要在setup后进行return返回，这无疑是一件枯燥的事情，在重构代码时，你也会面临巨大挑战。

为了解决这个问题，vue3添加了script setup语法糖提案。

像上面这段代码，使用script setup语法糖重构后，将变成：

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

defineProps<{
    name:string
}>()

const count = ref(0)
const inc = () => count.value++

<script>

怎么样，代码是不是变得可读性更强，更优雅了。

接下来我们看一下具体的用法。

基本用法

若要使用script setup语法，只需在原vue文件中的script标签加入setup属性。

<script setup lang="ts">

<script>

使用后意味着，script标签内的内容相当于原本组件声明中setup()的函数体，不过也有一定的区别。

使用setup中的参数

<script setup="props, context" lang="ts">

<script>

像这样，只要在setup处声明即可自动导入，同时也支持解构语法：

<script setup="props, { emit }" lang="ts">

<script>

暴露变量到模板

曾经的提案中，如果需要暴露变量到模板，需要在变量前加入export声明：

export const count = ref(0)

不过在新版的提案中，无需export声明，编译器会自动寻找模板中使用的变量，只需像下面这样简单的声明，即可在模板中使用该变量

const count = ref(0)

导入component或directive

直接import即可，无需额外声明

import { MyButton } from "@/components"
import { directive as clickOutside } from 'v-click-outside'

与原先一样，模板中也支持使用kabab-case来创建组件，如<my-button />

定义props，emit

<script setup>
  import { defineProps, defineEmit, useContext } from 'vue'

  const props = defineProps({
    foo: String,
  })
  const emit = defineEmit(['change', 'delete'])
</script>

增强的props类型定义：

const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmit<(e: 'update' | 'delete', id: number) => void>()

不过注意，采用这种方法将无法使用props默认值。

获取 slots 和 attrs

<script setup lang="ts">
  import { useContext } from 'vue'

  const { slots, attrs } = useContext()
</script>

await语法支持

在script setup内可以直接使用await语法：

<script setup>
  const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>

定义组件其他字段

在script setup内使用export default，其内容会被处理后放入原组件声明字段。

<script setup>
  export default {
    name: "MyComponent"
  }
</script>

vscode配套插件使用

volar是一个vscode插件，用来增强vue编写体验，使用volar插件可以获得script setup语法的最佳支持。