In addition to the bright spot of Composition API, vue3 has brought us a brand-new gadget - script setup. I believe everyone is familiar with setup, but some students say it is difficult to understand script setup. From now on, this article will let you understand it at a glance.

ref and reactive
In setup, we have two APIs, ref and reactive, to create a responsive variable. The difference between the two is that ref is a response to a basic type and reactive is a response to a reference type.

import { ref, reactive } from 'vue'

const data = ref('123')
const other = reactive({ is: '123' })

console.log(data.value)
console.log(other.is)

// It should be noted here that reactive objects can be accessed directly to modify internal sub data, and data needs to be used value access is modified as follows
data.value = '666'  // ok
data = '666'                 // no

other.is = '666'        // ok
other = '666'                // no

Import custom components
In the previous optionApi, we used components: {...} To import custom components, and now we only need to import components directly

<template>
    <Button>OK!</Button>
</template>

<script setup>
    import Button from 'element-ui-plus'
</script>

Custom method
In the previous optionApi, we used to write custom methods in methods. Here, we directly define a method or variable and use it directly in template

<template>
    <button @click="touchMe">OK!</button>
     <button @click="touchIt">OK!</button>
</template>

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

  const text = ref('123')

  const touchMe = () => {
    text.value = '666'
  }

  function touchIt() {
    text.value = '666'
  }
</script>

In general, the author recommends that developers use ref because ref has a wider scope of application.

New calculation function and watch
Now we use a simpler way to implement the calculation function and watch, and directly introduce the composite api to do it directly!

import { ref, computed, watch } from 'vue'

const data = ref('666')

const imComputed = computed(() => {
    return data.value + 'some thing'
})

const unwatch = watch(data, () => {
    console.log('data was be changed')
})

Simply get the ref component
We used this before$ Ref.refname is used to obtain ref components. Here, setup uses a simpler and more convenient way to obtain Ref

<template>
    <el-table ref="elTable"></el-table>
</template>

<script setup>
    import { ref } from 'vue'
  
  // refName = variable name will be automatically bundled in
  const elTable = ref(null)
  console.log(elTable.value)
</script>

Get props
In the previous optionApi, we need to define props in props first, and then from this XXX to get, which is prone to duplicate name coverage. Here vue3, defineProps is used to define props and directly return the response object.

<script setup>
    import { defineProps, toRefs, unref } from 'vue'
  
  const props = defineProps({
      a: {
        default: 0
    }
  })
  
  // Here a is equal to ref a response variable from props, which needs to be changed value operator
  const { a } = toRefs(props)
  
  // Here a is equivalent to directly extracting a common variable from props, changing it at will without response, and accessing it directly without value
  const { a } = unref(props)
  
</script>

At this point, I believe that developers will have a general understanding of script setup after reading it. In the vue3 period, quickly embrace the combined api and script setup to make the code look more concise ~