This is the 5th day of my participation in the August More Text Challenge.

script setup

Without 

<template>
    <h1 v-text="count"></h1>
    <p v-text="double"></p>
    <button @click="add">count++</button>
</template>

<script>
    import { ref, unref, computed } from 'vue';
    export default {
      setup() {
        const count = ref(1);
        const double = computed(() = > unref(count) * 2);
        function add() {
          count.value++;
        }
        return {
          count,
          double,
          add
        }
      }
    }
</script>
Copy the code

When we need to introduce a components, we not only need to import an explicit import in the file header, but also need to declare the components field. Not only that, variables declared in setup that need to be used by templates need to be explicitly returned at the end of setup, which is acceptable if your component template doesn’t use a lot of variables. But as variables and methods grow, it can be tedious to have to return after setup every time, and it can be challenging to refactor your code.

To solve this problem, VUe3 adds a Script Setup syntax sugar proposal.

After using 

<template>
    <h1 v-text="count"></h1>
    <p v-text="double"></p>
    <button @click="add">count++</button>
</template>

<script setup>
    import { ref, unref, computed } from 'vue'

    const count = ref(1)
    const double = computed(() = > unref(count) * 2)
    function add() {
      count.value++
    }
</script>
Copy the code

Not only data, but computed properties and methods, and even directives and components are automatically available in our template, which is magic

What’s the point of using it?

Long story short, this syntax makes individual file components simpler. In the words of RFC’s Ri, “The main goal of the proposal is to reduce the verbosity of using the SFC’s internal Composition API by exposing the < Script Setup > context directly to templates.”

This is what we just saw, and without worrying about the value returned in the setup method (because sometimes we should forget to return the value we need in setup, causing the template to not get the corresponding value), we can simplify the code.

use

Components use

In Script Setup, component imports are automatically registered:

<template>
  <Test :msg="msg"/>
</template>

<script setup lang="ts">
    import { ref } from 'vue'
    import Test from './components/test.vue'
    const msg = ref('msg')
</script>
Copy the code

The component registration step is omitted, and there is no explicit action to export variables.

Use props & emit & useContext

<template>
  <button @click="emit('setData', Number.parseInt(Math.random() * 10))">Add data</button>
</template>

<script setup>
    import { defineEmit, defineProps } from 'vue'
    // defineProps(['list'])
    const props = defineProps({
      list: {
        type: Array.default: () = >[]}})const emit = defineEmit(['deleteData'.'setData'])
    const { slots , attrs } = useContext()
</script>
Copy the code

  • Props needs to be defined using defineProps in the same way as before

  • Emit uses defineEmit to define the events that the component can emit

  • UseContext accesses the slot and properties of the component

  • DefineProps /defineEmit do simple type inference based on the passed value

DefineProps – as the name implies, this allows us to defineProps for the component;

defineEmits – Defines the events that a component can emit

UseContext – Provides access to components’ slots and properties

instruction

Directives are automatically registered as imports, just like components.

<template>
  <div v-click-outside />
</template>

<script setup>
  import { directive as clickOutside } from 'v-click-outside'
</script>
Copy the code

inheritAttrs

<template inherit-attrs="false"></template>
Copy the code

The default is true, in which parent-scoped Attribute bindings that are not recognized as props are “rolled back” and applied to the root elements of child components as normal HTML features

await

If you are using await you need to use it with Suspense asynchronous components

/* Parent component */<Suspense>
   <template #default>
     <AwaitComponent />
   </template>
   <template #fallback>
       loading....
   </template>
</Suspense>
Copy the code
<template>
  <h1>{{ result }}</h1>
</template>

<script lang="ts">
    import { ref } from "vue";
    const result = ref("")
    function promiseFun () {
            return new Promise((resolve, reject) = > {
                    setTimeout(() = > resolve('22322323'), 3000)
            })
    }
    result.value = await promiseFun()
</script>
Copy the code

Used with vscode plug-in

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

To learn more about Script Setup, click 👉, which is a link