Vue3.0 new syntax sugar script setup

script setup is a new syntax sugar introduced in vue3 to simplify the lengthy template code when using the 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. In addition, if the variables declared in setup need to be used by the template, they need to be returned explicitly at the end of 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. You will also face great challenges when refactoring the code.

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, does the code become more readable and elegant.

Next, let's look at the specific usage.

Basic Usage

To use 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)

However, in the new version of the proposal, there is no need to declare export. The compiler will automatically find the variable used in the template. You can use the variable in the template by simply declaring it as follows

const count = ref(0)

Import component or directive
You can 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

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

You can directly use await syntax in script setup:

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

Define additional fields for 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.

Original link: learn to use
https://blog.csdn.net/qq_17794813/article/details/117381219

Tags: Front-end Vue

Posted on Sun, 21 Nov 2021 20:47:51 -0500 by jgp4