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

Automatic registration component
Properties and methods need not be returned

use`this`

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

Option type API	Call time	setup
beforeCreate	Synchronously called after instance initialization and before data listening and event/listener configuration.	Don’t need
created	Is called synchronously immediately after the instance is created	Don’t need
beforeMount	Called before the mount begins	onBeforeMount
mounted	Called after the instance has been mounted	onMounted
beforeUpdate	The DOM is called after the data has changed and before it is updated	onBeforeUpdate
updated	Called after the virtual DOM has been re-rendered and updated due to data changes	onUpdated
beforeUnmount	Called before the component instance is unloaded	onBeforeUnmount
unmounted	Called after the component instance is unloaded	onUnmounted
errorCaptured	Called when an error from a descendant component is caught	onErrorCaptured
renderTracked	Called when tracking the virtual DOM is re-rendered	onRenderTracked
renderTriggered	Called when the virtual DOM rerendering is triggered	onRenderTriggered
activated	Called when activated by a component cached by keep-alive.	onActivated
deactivated	Called when a component cached by keep-alive is inactivated.	onDeactivated

`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).