오늘 우리는 Vue3의 Composition API, 특히 두 가지 매우 유용한 후크 함수 useRef 및 useEffect에 대해 이야기합니다.
먼저 useRef에 대해 이야기해 보겠습니다. 이 기능을 사용하면 도라에몽의 소품과 같이 다른 시간에 사용할 수 있는 가변 값을 생성할 수 있으며 항상 동일한 상태를 유지합니다. 예를 들어 DOM 요소에 대한 참조 또는 계산된 속성의 결과를 저장하는 데 사용할 수 있습니다. 우리가 그것을 어떻게 사용할 수 있는지 보자!
import {
useRef } from 'vue'
export default {
setup() {
const countRef = useRef(0)
function increment() {
countRef.value++
}
function decrement() {
countRef.value--
}
return {
countRef,
increment,
decrement,
}
},
}
이 예제에서는 숫자를 저장할 수 있는 countRef를 만듭니다. 그런 다음 각각 countRef 값을 늘리고 줄이는 데 사용되는 두 개의 함수 증가 및 감소를 정의합니다. 마지막으로 return을 통해 countRef와 두 함수를 함께 반환하므로 컴포넌트에서 사용할 수 있습니다. 간단하지 않습니까?
다음으로 useEffect에 대해 이야기하겠습니다. 이 기능을 사용하면 구성 요소가 렌더링된 후 DOM 요소 업데이트, API 호출, 이벤트 구독 등과 같은 일부 부작용을 수행할 수 있습니다. 소원을 적을 때마다 소원을 이루는 데 도움이 되는 마법의 공책이라고 생각할 수 있습니다. 우리가 그것을 어떻게 사용할 수 있는지 보자!
import {
useEffect } from 'vue'
export default {
setup() {
const countRef = useRef(0)
useEffect(() => {
console.log('组件已渲染')
countRef.value++
}, [])
return countRef.value
},
}
이 예제에서는 useEffect를 사용하여 구성 요소가 렌더링된 후 메시지를 출력하고 countRef 값을 1씩 증가시킵니다. 전달한 배열은 비어 있습니다. 즉, 구성 요소가 처음 렌더링될 때 부작용 작업이 한 번만 실행됩니다. 구성 요소가 업데이트될 때 부작용이 실행되도록 하려면 배열을 비워두거나 비어 있지 않은 배열을 전달할 수 있습니다. 예를 들어:
import {
useEffect } from 'vue'
export default {
setup() {
const countRef = useRef(0)
useEffect(() => {
console.log('组件已更新')
countRef.value++
}, [countRef.value])
return countRef.value
},
}
이 예제에서는 countRef.value의 변경에 따라 부작용 작업이 실행됩니다. countRef.value가 변경되면 작업이 다시 실행됩니다. 놀랍지 않나요?
물론 useEffect는 이벤트 구독, 상태 수정 등과 같은 더 많은 작업을 수행할 수 있습니다. 필요에 따라 사용하시면 됩니다. 그러나 부작용 작업을 사용하려는 경우 순수한 함수인지 확인하십시오. 그렇지 않으면 Vue의 가상 DOM 최적화 메커니즘이 손상되어 성능이 저하될 수 있습니다. 따라서 초보자는 사용 시 주의가 필요합니다!
물론 useEffect는 이벤트 구독, 상태 수정 등과 같은 더 많은 작업을 수행할 수 있습니다. 필요에 따라 사용하시면 됩니다. 그러나 부작용 작업을 사용하려는 경우 순수한 함수인지 확인하십시오. 그렇지 않으면 Vue의 가상 DOM 최적화 메커니즘이 손상되어 성능이 저하될 수 있습니다. 따라서 초보자는 사용 시 주의가 필요합니다!
useRef 및 useEffect는 Vue3 Composition API의 두 가지 매우 유용한 후크 함수로 구성 요소의 상태 및 부작용을 더 잘 관리하는 데 도움이 됩니다. 그들에 대해 더 알고 싶다면 많은 유용한 예제와 팁이 있는 공식 문서를 확인할 수 있습니다.
다음은 Vue3의 Composition API에서 useRef 및 useEffect를 사용하는 방법을 보여주는 간단한 샘플 코드입니다.
<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>
이 구성 요소에는 카운터의 상태와 카운트를 늘리거나 줄이는 버튼이 포함되어 있습니다. useRef를 사용하여 카운터의 상태를 저장하는 데 사용되는 countRef라는 변경 가능한 값을 만들었습니다. 그런 다음 구성 요소가 처음 렌더링된 후 useEffect를 사용하여 countRef 값을 증가시킵니다. 마지막으로 템플릿에서 사용할 수 있도록 countRef 값을 count 속성으로 반환합니다.
Vue3에서 Composition API는 복잡한 구성 요소를 더 잘 구성하고 관리하는 데 도움이 되는 매우 강력한 도구입니다. Composition API에 대해 더 알고 싶다면 제 다른 기사를 확인하세요!