At the Vue Conf 21 conference, script setup syntax was mentioned in particular!

By Matt Maribojoc
Translator: front end Xiaozhi
Source: stackabuse

There are dreams and dry goods. Wechat search [Daqian world] pays attention to this dish washing wisdom who is still washing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi It has been included. There are complete test sites, materials and my series of articles for the interview of front-line large factories.

If you have recently worked with Vite and Vue3, you will notice that this < srcript > syntax is used in Vue components.

<script setup>
import HelloWorld from './components/HelloWorld.vue'
// This template uses Vue3 experimental ` < script setup > ` SFCS

You may wonder, "what the hell is this? Is this the Options API? Or the Composition API? Where is the setup method?"

The < script setup > type is the recommendation in Vue's Git RFC. It should be made clear that this is not intended to completely replace any current writing. Its purpose is to provide developers with a more concise syntax to write their individual file components.

In this paper, we carefully study its working principle and some useful methods.

script setup

In < script setup >, we do not need to declare export default and setup methods. This writing method will automatically expose all top-level variable declarations to the template for use.

In the Composition API, we are used to creating the setup method and then returning what we want to expose, as shown below:

<script>
import { ref, computed } from 'vue'
export default {
   setup () {
      const a = ref(3)
      const b = computed(() => a.value + 2)
      
      const changeA = () => { a.value = 4 }
      return { a, b, changeA } // have to return everything! 
   }
}
</script>

If the < script setup > syntax is used, we can use the following code to realize the same function as the above:

<script setup>
import { ref, computed } from 'vue'
// all of these are automatically bound to the template
const a = ref(3)
const b = computed(() => a.value + 2)
      
const changeA = () => { a.value = 4 } 
</script>

Not only the data, the properties and methods of calculation, but also the instructions and components can be obtained automatically in our template.

<template>
     <component-b />
</template>
<script setup>
import ComponentB from './components/ComponentB.vue' // really that's it!
</script>

This is magical.

So what's the point?

To make a long story short, this syntax makes a single file component simpler.

In the original words of the RFC, "the main goal of this proposal is to reduce the verbosity of the use of the Composition API within SFC by directly exposing the context of < script setup > to the template."

This is what we just saw. We don't need to care about the value returned in the setup method (because sometimes we should forget to return the value we need in the setup, so the template can't get the corresponding value). We can simplify the code.

More advanced usage of < script setup >

Now that we know what < script setup > is and why it works, let's take a look at some of its more advanced features.

Access props, emit events, etc

First, you may want to know how to perform standard Vue operations, such as:

Access props
How to issue custom events
Access context object

In the Composition API, these parameters are placed in the setup method

setup (props, context) {
    // context has attrs, slots, and emit
}

However, in script setup syntax, we can access these same options by importing the corresponding API from Vue three times.

Define props – as the name suggests, it allows us to define props for components
Define emits – defines the events that a component can emit
useContext – the slots and properties of the component can be accessed

<template>
 <button @click="$emit('change')"> Click Me </button>
</template>
<script setup>
  import { defineProps, defineEmit, useContext } from 'vue'

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

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

Through these three kinds of import, we can obtain the functions commonly used in traditional setting methods.

Create asynchronous setup method

Another cool feature of script setup syntax is that it is very easy to create asynchronous setup.

This is useful for loading APIs when creating components and even binding code to < suspend > functions.

All we have to do is make our setup function asynchronous and use a top-level await in our script setup.

For example, if we use the Fetch API, we can use await like this

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

In this way, the setup() function will be asynchronous.

Use < script setup > and a normal < script >

< script setup > creates its own script scope for its top-level binding. However, in some cases, the code must be executed within the scope of the module.

Two specific examples in this RFC are:

Declaring named exports
Create a global side effect that is executed only once

This can be done by adding a normal < script > block next to script setup, as shown below.

<script>
  performGlobalSideEffect()

  // this can be imported as `import { named } from './*.vue'`
  export const named = 1
</script>

<script setup>
  // code here
</script>

summary

Currently, this script setut is optional, so if you want to try it, just add setup to the script tag.

To learn more about script setup, see Click here , link to the complete RFC and its motivation, exact syntax and more technical implementations.

The bugs that may exist after the code is deployed cannot be known in real time. Afterwards, in order to solve these bugs, we spent a lot of time on log debugging. By the way, we recommend a useful BUG monitoring tool Fundebug.

Original text: https://learvue.co/2021/05/explaining-the-ne-script-setup-type-in-vue-3-major-takeaways-from-the-rfc/

communication