script setup is a new syntax sugar introduced in vue3 to simplify the lengthy template code when using Composition API.

For example:

<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>

It can be seen that when we need to import a component, we not only need to import it explicitly in the file header, but also need to add a declaration in the components field. Moreover, if the variables declared in the setup need to be used by the template, they need to be returned explicitly at the end of the setup. If your component template uses few variables, this situation can be reluctantly accepted. However, when your variables and methods gradually increase, you have to return after setup every time. This is undoubtedly a boring thing. When refactoring the code, you will also face great challenges.

To solve this problem, vue3 added script setup syntax.

Like the above code, after refactoring with script setup syntax, it will become:

<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>

How about it? Has the code become more readable and elegant.

Next, let's look at the specific usage.

 

Basic Usage

To use the script setup syntax, simply add the setup attribute to the script tag in the original vue file.

<script setup lang="ts">

<script>

After use, it means that the content in the script tag is equivalent to the function body of setup() in the original component declaration, but there are some differences.

Use parameters in setup

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

<script>

Like this, you can import automatically as long as you declare it in setup. At the same time, it also supports deconstruction syntax:

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

<script>

 

Expose variables to templates

In the previous proposal, if you need to expose variables to the template, you need to add an export declaration before the variables:

export const count = ref(0)

You only need to use the variable declaration in the new version of the template, but you don't need to use the variable declaration in the template

const count = ref(0)

 

Import component or directive

import directly without additional declaration

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

As before, the template also supports the use of Kabab case to create components, such as < my button / >

 

Define props, emit

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

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

Enhanced props type definition:

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

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

Note, however, that the props default cannot be used with this approach.

 

Get slots and attrs

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

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

 

await syntax support

await syntax can be used directly in script setup:

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

 

Define other fields of the component

Use export default in script setup, and its contents will be processed and put into the original component declaration field.

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

 

vscode supporting plug-ins

Volar is a vscode plug-in to enhance the vue writing experience. Using volar plug-in can get the best support for script setup syntax.