preface

Vue3 has been around for a long time, and most of the front-end people have already played with it. One of the big features is the Setup method, which allows us to combine our business logic with hooks very intuitively and easily. Variables returned in setup can be used directly in template. For the most part, most of our logic is centered in setup methods, so an experimental way to write setup directly inside a script is provided: Setup Script.

use

Our previous component might look like this:

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <Card>{{msg}}</Card>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import Card from "./components/Card.vue";

export default defineComponent({
  components: {
    Card,
  },
  setup() {
    const msg = ref("setup script");
    return{ msg }; }});</script>
Copy the code

Two things are done here: one is to import and register the component, and the other is to export a string to the template for use.

When setup script is enabled, it looks like this:

<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <Card>{{msg}}</Card>
  </div>
</template>


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

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

It’s an experimental feature, but out of the box, you just need to configure setup on script.

Export variables & methods

All variables defined in the Setup script are automatically exported. Very convenient

<script lang="ts" setup>
import { ref } from "vue";
const msg = ref("setup script");
const handlerClick = () = > {
  console.log("on click");
};
</script>
Copy the code

Using the component

All component imports can be automatically registered:

<script lang="ts" setup>
import Card from "./components/Card.vue";
import Button from "./components/Button.vue";
</script>
Copy the code

Use props – defineProps

DefineProps is used to define functions in the same way as defineProps:

<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps(['title'.'content']);
</script>
Copy the code

Define the type for props:

const props = defineProps({
  title: String.content: {
      type: Stirng,
      required: true}});Copy the code

How to use TS annotations:

defineProps<{ title? :string
  content: string} > ();Copy the code

Use emits – defineEmit

Use defineEmit to validate and define the events used in the component:

const emit = defineEmit(['onHeaderClick'])
emit('onHeaderClick'.'params')

// Validate the event
const emit = defineEmit({
    onHeaderClick: ({title}) = > {
        if(! title) {console.warn('Invalid title')
            return false
        }
        return true}})Copy the code

The exact usage is the same as before.

Use context-usecontext

Use useContext to get context:

import { useContext } from 'vue'
const { slots, attrs } = useContext()
Copy the code

The obtained slots attrs are the same as those in the previous setup.

instruction

Directives, like components, import custom registrations:

<script setup>
  import {color} from './v-color'
</script>

<template>
  <div v-color />
</template>
Copy the code

The imported color is automatically mapped to the instruction V-color

<script setup>
  import {color as superColor} from './v-color'
</script>

<template>
  <div v-super-color />
</template>
Copy the code

conclusion

Setup Script code looks much simpler, and development efficiency is greatly improved. Unfortunately, it is still an experimental feature. The proposed date is 2020-10-28 and has not been released yet.

But the good news is:

Either way, having a local experience improves overall happiness.

Don’t use it in a production environment.