Today we talk about Vue3's Composition API, especially the two super useful hook functions useRef and useEffect.
First, let's talk about useRef. This function allows you to create a mutable value, like Doraemon's props, that can be used at different times, and it will always maintain the same state. For example, you can use it to store a reference to a DOM element, or the result of a computed property. Let's see how we can use it!
import {
useRef } from 'vue'
export default {
setup() {
const countRef = useRef(0)
function increment() {
countRef.value++
}
function decrement() {
countRef.value--
}
return {
countRef,
increment,
decrement,
}
},
}
In this example, we create a countRef which can store a number. Then we define two functions increment and decrement, which are used to increase and decrease the value of countRef respectively. Finally, we return countRef and the two functions together through return, so that we can use them in the component. Is not it simple?
Next, let's talk about useEffect. This function allows you to perform some side effects after the component is rendered, such as updating DOM elements, calling APIs, subscribing to events, etc. You can think of it as a magic notebook, every time you write down a wish, it will help you achieve it. Let's see how we can use it!
import {
useEffect } from 'vue'
export default {
setup() {
const countRef = useRef(0)
useEffect(() => {
console.log('组件已渲染')
countRef.value++
}, [])
return countRef.value
},
}
In this example, we use useEffect to print a message after the component renders and increment the value of countRef by 1. Note that the array we passed in is empty, which means our side effect operation will only be executed once when the component is first rendered. You can leave the array empty or pass in a non-empty array if you want side effects to be executed when the component is updated. For example like this:
import {
useEffect } from 'vue'
export default {
setup() {
const countRef = useRef(0)
useEffect(() => {
console.log('组件已更新')
countRef.value++
}, [countRef.value])
return countRef.value
},
}
In this example, our side effect operation will be executed based on the change of countRef.value. If countRef.value changes, our operation will be executed again. Isn't it amazing?
Of course, useEffect can do more things, such as subscribing to events, modifying state, and so on. You can use it according to your needs. But be careful, if you want to use side effects, make sure it is a pure function, otherwise it may break Vue's virtual DOM optimization mechanism, resulting in performance degradation. So beginners must be careful when using them!
Of course, useEffect can do more things, such as subscribing to events, modifying state, and so on. You can use it according to your needs. But be careful, if you want to use side effects, make sure it is a pure function, otherwise it may break Vue's virtual DOM optimization mechanism, resulting in performance degradation. So beginners must be careful when using them!
useRef and useEffect are two very useful hook functions in the Vue3 Composition API, which can help you better manage the state and side effects of components. If you want to learn more about them, you can check the official documentation, which has many useful examples and tips.
Here is a simple sample code that demonstrates how to use useRef and useEffect from Vue3's Composition API:
<template>
<div>
<p>Count: {
{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import {
useRef, useEffect } from 'vue'
export default {
setup() {
const countRef = useRef(0)
useEffect(() => {
console.log('组件已渲染')
countRef.value++
}, [])
function increment() {
countRef.value++
}
function decrement() {
countRef.value--
}
return {
count: countRef.value,
increment,
decrement,
}
},
}
</script>
This component contains the state of a counter, and buttons to increase and decrease the count. We used useRef to create a mutable value called countRef which is used to store the state of the counter. Then we use useEffect to increment the value of countRef after the component is first rendered. Finally, we return the value of countRef as the count property so we can use it in the template.
In Vue3, the Composition API is a very powerful tool that can help you better organize and manage complex components. If you want to know more about Composition API, you can check out my other articles!