I remember when I first experimented with the Script Setup syntax sugar, the editor suggested that this was an experimental proposal and that I needed to fix the Vue version to use it.

At the end of June, the proposal was finalized. In V3.1.3, you can still use it but there will still be a hint for the experimental proposal. In V3.2, the hint will be removed and some of the deprecated apis will be removed.

What is Script Setup?

It is a new syntax sugar for Vue3, in the setup function. All ES module exports are considered context-exposed values and are included in the Setup () return object. The syntax is also simpler than before.

It is as simple as adding the setup keyword to the script tag. Example:

<script setup></script>
Copy the code

Automatic component registration

In Script Setup, imported components can be used directly without having to register with components, and there is no way to specify the name of the current component, which automatically takes precedence over the file name, i.e. no need to write the name attribute. Example:

<template>
    <Child />
</template>

<script setup>
import Child from './Child.vue'
</script>
Copy the code

If you want to define a property like name, you can add a horizontal script tag to it.

Use of component core apis

The use of props

DefineProps specifies the current props type to get the props object of the context. Example:

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

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

Using emits

Use defineEmit to define the events contained by the current component and execute the emit through the returned context. Example:

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

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

Get slots and attrs

Slots and attrs can be obtained from the context via useContext. However, when the proposal was passed, it did away with this syntax and was split into useAttrs and useSlots. Example:

// old <script setup> import {useContext} from 'vue' const {slots, Attrs} = useContext() </script> import {useAttrs, useSlots } from 'vue' const attrs = useAttrs() const slots = useSlots() </script>Copy the code

defineExpose API

Traditionally, we can access the contents of the child components in the parent component through the ref instance, but in Script Setup, this method does not work. Setup is a closure, and no one can access the internal data and methods except the internal template template.

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

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

Properties and methods do not need to be returned.

This is probably one of the big advantages of writing data and methods that need to be returned at the end before they can be used in the template. In Script Setup, properties and methods defined do not need to be returned and can be used directly! Example:

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

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

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

Quote: juejin. Cn/post / 698362…