There are a lot of new composite apis in VUe3.0, and the composite API was inspired by React Hooks.

Since there is no this in setup, data that responds to the template must use the help of the relevant API, which is used in the setup function. The API usage flow is as follows:

1, the introduction of

import {ref} from "vue"; This is not a ref in 2.xCopy the code

2, write,

Setup () {return let count = ref(100); return {count} },Copy the code

3, use,

<div >{{count}}</div> //100
Copy the code

Common composition API introduction

Reactive: Reactive is vuE3’s approach to data responsiveness, enabling bidirectional data binding of complex data types in setup. Listen for changes to complex types. If it’s any other type, it’s not going to refresh itself unless it’s reassigned,

Let count2 = reactive ([1, 2, 3])Copy the code

Ref: Ref is also a data-responsive method provided by VUe3, but for basic data types. Reactive (ref (xx) -> reactive({value:xx})); reactive(ref (xx) -> reactive({value:xx})); For example, the count2.value in the above example can get a value, but in template we can just {{count}} without the.value, because 3.0 does that for us.

Ref and Reactive:

Value is added to the ref data in the template by default, and reactive is not

True /false is determined by the value of — V-ref for the current data

IsReactive: checks whether the data isReactive

Let count2 = reactive([1,2,3]) console.log(isReactive(count2)) //trueCopy the code

IsRef: checks whether the data type isRef. This is the same as isReactive

Recursive and non-recursive listening

Both REF and Reactive are recursive listeners. Recursive listeners listen on each layer of data, which consumes performance and updates the UI interface each time they are traced.

ShallowReactive: In contrast to Reactive, shallowReactive is non-recursive. ShallowReactive only listens to the first layer of data that is wrapped by the proxy. If the first layer does not change, it will be rendered again.

**shallowRef: ** Compared to ref, shallowRef listens for changes in the value of the first layer.

**triggerRef: ** Listens for changes to a layer to make updates

state.value.a = "4"; triggerRef(state); // Only state.value.a is updatedCopy the code

**toRaw: ** Does not respond to the data that is transmitted. The principle is to obtain reactive raw data and package it as a proxy, and toRaw needs to add.value to obtain ref raw data

Let b= toRaw(a) b===a //trueCopy the code

**markRaw: ** Data should never be tracked

a = markRaw(a);
Copy the code

**toRef: ** corresponds to a shallow copy of ref that can affect data, whereas ref is a deep copy

**toRefs: ** is the plural form of toRef. ToRef can only change a single value, which is equivalent to performing multiple toRefs

**customRef: **customRef, which can be used to handle asynchronism

function useDebouncedRef(value, delay = 200) { let timeout return customRef((track, Trigger) => {return {get() {// the request cannot be processed inside the get. Track () // tell VUE that the data to track is return value}, Set (newValue) {clearTimeout(timeout) timeout = setTimeout(() => {value = newValue trigger() // tells VUE to trigger UI updates}, delay) } } }) }Copy the code

**onMounted: ** Uses the lifecycle function in setup, which contains the callback function, as well as other lifecycle functions

onMounted(() => {
      console.log(box.value);
      console.log(box,"box");
    })
Copy the code

**readonly: ** Creates read-only data, recursively read-only

The difference between const and readonly const: protected by assignment and cannot be assigned to variables readonly: protected by property and cannot be reassignedCopy the code

**isReadonly: ** Checks whether it is read-only

**shallowReadonly: ** Also creates read-only data, but not recursively

**computed:** Computed properties in SETUP.

Let count = computed(() => {// Calculate attributes return store.state.xx})Copy the code

Use Vuex in setup

① Download and install the Vuex: Omitted

(2) the introduction of

Introduce userStore in VUex where setup needs to use vuex

import { userStore } from "vuex";
Copy the code

③ Use it in setup

Setup (){// use const store = userStore(); } return {a} let a = store.state.xx //commit, getters, dispatch, etc.Copy the code

Using vuex in template and elsewhere is consistent with 2.x.