Understanding the Syntax of Vue3 script setup

What is vue3 script setup?

It is a new syntactic sugar in Vue 3, compared to the previous approach, the syntax becomes simpler after using it.

The usage is extremely simple, you just need to add the setup keyword to the script tag. For example:

<script setup></script>

Component Registration Automatically

In script setup, the imported components can be used directly, You don't need to register them through components. Moreover, you don't have to specify the current component's name, it will automatically use the filename as component name, which means you no longer need to write the name property. For example:

<template>
    <Child />
</template>

<script setup>
import Child from './Child.vue'
</script>

If you need to define component name, you can add another script tag or use defineOptions.

Usage of Core API

Usage of props

Define the current props with defineProps, and get the props object of the component instance. For example:

<script setup>
  import { defineProps } from 'vue'

  const props = defineProps({
    title: String,
  })
</script>

Usage of emits

Use defineEmit to define the events that our component can emit, the parent component know when to emit.

<script setup>
  import { defineEmits } from 'vue'

  const emit = defineEmits(['change', 'delete'])
</script>

slot and attrs

You can get slots and attrs from the context using useContext. However, after the proposal was formally adopted, this syntax was deprecated and split into useAttrs and useSlots. For example:

// old
<script setup>
  import { useContext } from 'vue'

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

// new
<script setup>
  import { useAttrs, useSlots } from 'vue'

  const attrs = useAttrs()
  const slots = useSlots()
</script>

defineExpose API

In the traditional approach, we can access the content of child components in the parent component through the ref instance. However, this method cannot be used in script setup. setup is a closure, and apart from the internal template template, no one can access the internal data and methods.

If you need to expose the data and methods in setup externally, you need to use the defineExpose API. For example:

<script setup>
  import { defineExpose } from 'vue'
  const a = 1
  const b = 2
  defineExpose({
   a
  })
</script>

No need to return properties and methods, use them directly!

This may be one of the major conveniences in setup. In the past, when defining data and methods, they all needed to be returned at the end in order to be used in the template. In script setup, the defined properties and methods do not need to be returned, they can be used directly! For example:

<template>
  <div>
    <p>My name is {{name}}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const name = ref('Sam')
</script>