Use of the Vue3 composite API

Modular API

A composite API is literally a combination of ways, like building blocks. Here are a few things you need to know about using a composite API:

Setup component options

Setup is an entry point to the composite API, and it defines an entry point to the composite API, as do Data, computed, Watch, and Methdos in VUe2. The general code is as follows:

<template>
    <div>
        {{counter}}
    </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'Home',
  setup(props,context){
    console.log(props,context)
    const counter = ref(0)
    
    return {
        counter
    }
  }
}
</script>
Copy the code

Setup above is the composite API. The combinatorial API takes what Vue2 used to be scattered around in data, life cycle, Watch, computed, and methods and puts it all together in SETUP. The advantage of this is that we can take some business or logic out of the setup and introduce it when we need it. It’s a little more convenient than vue2.

Script Setup syntax sugar

Setup Script is one of vue3’s new syntactic candy, which is used by adding a setup modifier to a script tag when it is written.

The code is as follows:

<template>
    <div>
        {{counter}}
    </div>
</template>

<script setup>
import { ref } from 'vue'
const counter = ref(0)
</script>
Copy the code

The benefits of the Setup script

1. Automatic registration component
2. Properties and methods need not be returned

usethis

Inside setup(), this is not a reference to the active instance, because setup() is called before the other component options are resolved, so this inside setup() behaves completely differently than this in the other options. This makes setup() confusing when used with other optional apis.

Definition of reactive variables

1. Ref () function

The ref() function creates a responsive data object based on a given value, passing in basic data types such as string, number, Boolean, etc. The return value is an object containing only one value attribute

Ref defines variables that change value to.value, and we don’t have to write.value in template

<template> <div>{{count}}</div> < button@click ="setCount"> Modify </button> </template> <script setup> import {ref} from 'vue' import HelloWorld from '@ / components/HelloWorld. Vue / / define const count = ref (0) / / modify const setCount = () = > { count.value = count.value + 1 } </script>Copy the code

2. The reactive () function

Reactive () passes in a reference type, such as an array or object, but does not return a reactive data object.

Reactive data that you want to create using the reactive() function is also easy to create and call directly from the template.

<template> <div>{{state.msg}}</div> < button@click ="setMsg()"> </button> </template> <script setup> import {reactive} From 'vue' const state = reactive({MSG: // modify const setMsg = () => {state. MSG = 'MSG changed'} </script>Copy the code

3. Bind refs to child components or HTML elements

<template> <div> hahaha </div> <HelloWorld ref='helloWorldRef'></HelloWorld> </template> <script setup> import {ref} from 'vue' import HelloWorld from '@/components/HelloWorld.vue' const helloWorldRef = ref() </script>Copy the code

Use Watch in setup

Watch takes three arguments as a function in setup: a listening value, a callback, and an optional configuration. Examples are as follows:

<script setup>
import { ref, watch } from 'vue'
    
const counter = ref(0)

watch(counter, (newValue, oldValue) => {
   console.log(counter.value)
})
    
</script>
Copy the code

Use computed in setup

<script setup>
import { ref, computed } from 'vue'
    
const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)

counter.value++
    
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2
    
</script>
Copy the code

Lifecycle hook

defineProps 和 defineEmits

DefineProps and defineEmits apis must be used to declare props and emits in

<script setup> const props = defineProps({foo: {type: String, // type required: true, // Default: "Please enter" // default value}}) const emit = defineEmits(['change', 'delete']) // setup code </script>Copy the code

• defineProps 和 defineEmitsAre only in<script setup>In order to useThe compiler macros. They do not need to be imported and will follow<script setup>The processing is compiled together.
• definePropsReceive andpropsoptionsThe same value,defineEmitsAlso to receiveemitsoptionsSame value.

defineExpose

Components that use < Script Setup > are turned off by default, that is, public instances of components retrieved from the template ref or $parent chain do not expose any bindings declared in < Script Setup >.

To specify the attributes to expose in the < Script Setup > component, use the defineExpose compiler macro:

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

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>
Copy the code

When the parent component gets an instance of the current component from the template ref, the instance will look like {a: number, b: number} (ref is automatically unpacked as in normal instances).