I have already introduced the relevant knowledge points of vue3: ref, reactive, computed, watch, watchEffect, toRef, toRefs and these reactive APIs. I believe everyone has a certain understanding of vue3.
Life cycle
In addition to these functions, vue3 also adds some life cycles. You can directly import functions from the onXXX family to register life cycle hooks: a combined API corresponding to the life cycle of the 2.x version.
1、beforeCreate -> 使用 setup()
2、created -> 使用 setup()
3、beforeMount -> onBeforeMount
4、mounted -> onMounted
5、beforeUpdate -> onBeforeUpdate
6、updated -> onUpdated
7、beforeDestroy -> onBeforeUnmount
8、destroyed -> onUnmounted
9、errorCaptured -> onErrorCaptured
import {
onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
setup() {
onMounted(() => {
console.log('mounted!')
})
onUpdated(() => {
console.log('updated!')
})
onUnmounted(() => {
console.log('unmounted!')
})
},
}
These lifecycle hook registration functions can only be used synchronously during setup(), because they rely on the internal global state to locate the current component instance (the component instance that is calling setup()). Calling these functions without the current component will throw a mistake.
The usage of life cycle is not much different from vue2, but remember to import the API when using it.
Dependency injection
The Vue composite API provides provide and inject functions for dependency injection, which are similar to the provide/inject of the vue2 options API. Both provide and inject functions can only be called in the setup() of the currently active component instance.
Provide provide in upstream components:
setup () {
provide('Theme', 'dark')
}
Use in downstream components:
<template>
<div> hello </div>
</template>
<script>
import {
ref, inject } from 'vue'
export default {
setup () {
const theme = inject('Theme', 'light' /* 默认值 */)
console.log(theme, '依赖注入')
}
}
</script>
Utility function
Vue3 also has some other APIs. The tool functions are as follows:
1. Readonly turns the object into read-only.
2. isRef checks whether a value is a ref object.
3. isProxy checks whether an object is a proxy created by the reactive or readonly method.
4. isReactive checks whether an object is a reactive proxy created by reactive.
5. isReadonly checks whether an object is a read-only proxy created by readonly.
6. If the parameter is a ref, unref returns its value, otherwise it returns the parameter itself
When we extract and reuse logic between components, the combined API is very flexible. A composite function only depends on its parameters and Vue's globally exported API, not on its subtle this context. You can export any piece of logic in the component as a function to reuse it. You can even export the entire setup function to achieve the equivalent effect of extends.