By Matt Maribojoc

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.

If you’ve been working with Vite and Vue3 lately, you’ll notice that this < SRcript > syntax is used in Vue components.

< script setup > import HelloWorld from '. / components/HelloWorld. Vue '/ / this template is used Vue3 experimental ` < script setup > ` SFCsCopy the code

You might be wondering, “What the hell is this? This is the Options API, right? Composition API? Where is the setup method?”

The

In this article, we take a closer look at how it works and some useful methods.

script setup

In

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

<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>Copy the code

Using the 


<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>
Copy the code

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

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

This is magic.

So, what’s the point?

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.

<script setup>A more advanced use of

Now that we know what < Script Setup > is and why it’s useful, let’s look at some of its more advanced features.

Access props, emit events, etc

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

  • Visit the props
  • How do I emit custom events
  • Accessing context objects

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

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

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

  • 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
<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>
Copy the code

With these three imports, we can get the usual functionality from the traditional setup method.

Create asynchronous setup methods

Another cool feature of the Script Setup syntax is how easy it is to create asynchronous setups.

This is useful for loading apis and even binding code to your

functionality when creating components.

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

For example, if we were using the Fetch API, we could use await like this

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

Thus the setup() function will be asynchronous.

use<script setup>And a regular one<script>

The two concrete examples in this RFC are:

  • Declaring named exports
  • Create global side effects that are executed only once

This can be done by adding a normal 

<script>
  performGlobalSideEffect()

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

<script setup>
  // code here
</script>
Copy the code

conclusion

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

To learn more about Script Setup, click here for links to the full RFC and its motivations, the exact syntax, and more technical implementations.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: learvue co / 2021/05 / exp…

communication

Have a dream, have dry goods, wechat search [big Move the world] pay attention to this in the early morning is still in the bowl washing wisdom.

In this paper, making github.com/qq449245884… Has been included, a line of large factory interview complete test sites, information and my series of articles.