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.