Vue에서 ref와 reactive를 사용해야 하는 경우

Vue 3 릴리스에서는 구성 요소의 데이터에 반응성을 추가하는 두 가지 새로운 방법인 ref() 및 reactive() 를 도입했습니다. 어느 것이 더 나은지 또는 언제 사용해야 하는지에 대해 약간의 혼란이 있었습니다. 나는 그들의 차이점에 대해 약간의 빛을 비추고 내 응용 프로그램에서 어떻게 사용하는지 보여주기 위해 여기에 있습니다.

참조

ref() 메서드는 단일 값을 사용하고 가변 및 반응 객체를 다시 반환합니다. 이 예제 코드를 살펴보겠습니다.

const amount = ref(0)

금액을 1씩 증가시키는 방법을 만들고 싶다면 다음과 같이 할 수 있다고 생각할 수 있습니다.

const increaseAmount = () => {
    amount++
}

그러나 ref()에서는 ref 개체 내부의 데이터를 검색하거나 조작하기 위해 value라는 중간 속성을 사용해야 합니다. 따라서 대신 다음을 수행합니다.

const increaseAmount = () => {
    amount.value++
}

ref() 메서드는 모든 JavaScript 프리미티브를 사용하므로 부울, 문자열, 정수 또는 개체를 전달할 수 있습니다.

<script setup>
const active = ref(true)
const message = ref('Hello, world!')
const amount = ref(23)
const user = ref({
    name: 'Andrew',
    email: '[email protected]'
})

user.value.email = '[email protected]'
</script>

<template>
    <h1>{{ message }}</h1> <!-- Hello, world! -->
</template>

값을 참조하거나 변경할 때(템플릿 외부) 항상 반환된 객체에 .value 속성을 사용해야 합니다.

반응성

reactive() 메서드는 ref와 유사하게 작동하지만 개체만 허용합니다.

// not reactive
const user = reactive('Andrew')

// reactive
const user = reactive({ name: 'Andrew' })

ref와 달리 반응 객체의 속성을 가져오거나 변경하기 위해 .value와 같은 중간 속성을 사용할 필요가 없습니다. 객체의 속성을 직접 호출할 수 있습니다.

<script setup>
const user = reactive({ name: 'Andrew' })
user.name = 'Ashley'
</script>

<template>
    <p>My name is {{ user.name }}</p> <!-- My name is Ashley -->
</template>

reactive()의 흥미로운 기능은 자체 내에서 사용하기 위해 ref 개체를 래핑 해제할 수도 있다는 것입니다.

const items = ref(10)
const cart = reactive({ items })

items.value++
console.log(cart.items) // 11

cart.items++
console.log(items.value) // 12

둘 사이의 반응성도 유지되므로 하나의 값을 업데이트하면 다른 값의 업데이트가 트리거됩니다.

결론

ref() 및 reactive() 모두 Vue 구성 요소에 반응성을 추가합니다. 이를 통해 애플리케이션 전체에서 실시간으로 업데이트되고 응답하는 데이터를 가질 수 있습니다. 차이점은 다음과 같습니다.

전달하는 데이터 및

가치를 얻기 위해 중개재산을 거래하고 싶다면

개인적으로 저는 일반적으로 구성 요소의 반응 속성에 대해 ref()를 고수합니다. 그래도 몇 개 이상 있으면 로컬 "상태"개체를 만들고 대신 reactive()를 사용합니다.

다음과 같이 대신합니다.

const name = ref('Andrew')
const checked = ref(false)
const games = ref(['Factorio', 'CS:GO', 'Cities: Skylines'])
const elem = ref('#active')

나는 이것을 가지고있다:

const state = reactive({
    name: 'Andrew',
    checked: false,
    games: ['Factorio', 'CS:GO', 'Cities: Skylines'],
    elem: '#active'
})

글쎄요, 이것이 Vue에서 ref와 reactive 사이의 차이점(및 유사점)을 좀 더 명확하게 만들었기를 바랍니다.

이것에 대해 질문이 있거나 웹 개발과 관련된 다른 사항이 있으면 의견에 알려주거나 에서 저에게 연락하십시오!