6_반응형 기초

1. reactive() 

- 객체의 데이터를 반응형으로 선언하고 싶을 때 사용하는 함수.

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    return {
      state
    }
  }
}

<div>{{ state.count }}</div>

- ref()와 다른 점은 ref()는 원시데이터, reactive() 는 배열이나 객체 형태의 데이터에만 반응형으로 선언할 수 있게 해준다.

- 객체의 깊이가 깊어져도 사용가능하다.

 

 

2. ref()

:변이 가능한 원시 데이터를 다루며, 하나의 속성 value만을 가진다.

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

템플릿에서 사용할 때, 자동으로 unrapping 하기 때문에 value를 따로 써주지 않아도 된다.

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="count ++">카운트 증가</button>
  </div>
</template>

<script>
  import { ref } from 'vue'
  export default {
    setup() {
      const count = ref(0)
      return {
        count
      }
    }
  }
</script>

reactive는 객체에만 반응하므로 원시형 데이터에 접근하고 싶을 때 ref()를 사용할  수 있다.

이때 반응형 객체에서도 ref()를 사용할 때 unwrapping 되고 반응형은 연결 되어 있다.

const count = ref(0)
const state = reactive({
  count
})
count.value++
console.log(count.value) // 1
console.log(state.count) // 1

 

그러나 배열이나 map과 같은 컬렉션 타입의 요소로 접근할 때는 unwrapping 되지 않는다.

const books = reactive([ref('Vue 3 Guide')])
// need .value here
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// need .value here
console.log(map.get('count').value)

 

3.반응형 상태 구조분해하기

import { reactive } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: '당신은 이 책을 지금 바로 읽습니다 ;)',
  price: '무료'
})

let { author, title } = book 

//그냥 하면 반응형을 잃어버리고 그저 해당 속성이 가진 값만 가져오게 됨

 

그럴때는 ref들로 변환해야하는데 이 때 사용되는 함수는 toRef(), toRefs().

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: '당신은 지금 바로 이 책을 읽습니다  ;)',
  price: '무료'
})

let { author, title } = toRefs(book)

title.value = 'Vue 3 상세 Guide' // title 이 ref 이므로 .value 를 사용해야 합니다.
console.log(book.title) // 'Vue 3 Detailed Guide'

//서로 값이 동기화 되어 한쪽을 수정하면 다른 한쪽도 수정된다.

 

 

4.readonly를 이용하여 반응형 객체의 변경 방지

때때로 반응형 객체(ref나 reactive)의 변화를 추적하기 원하지만, 또한 특정 부분에서는 변화를 막기를 원할 때 사용.

예를 들어, Provide/Inject로 주입된 반응형 객체를 갖고 있을 때, 우리는 그것이 주입된 곳에서는 해당 객체가 변이되는 걸 막을 때. 

import { reactive, readonly } from 'vue'

const original = reactive({ count: 0 })

const copy = readonly(original)

// 원본이 변이되면 복사본에 의존하는 watch 도 트리거될 것 입니다.
original.count++

// 복사본을 변이하려고 하면 경고와 함께 실패할 것 입니다.
copy.count++ // warning: "Set operation on key 'count' failed: target is readonly."

 

**Reactivity Transform 실험적인 단계**

refs와 함께 .value를 사용해야 하는 것은 JavaScript의 언어 제약으로 인한 단점입니다. 그러나 compile-time transforms을 사용하면 적절한 위치에 .value를 자동으로 추가하여 인체 공학을 개선할 수 있습니다.

Vue는 다음과 같이 이전 “counter” 예제를 작성할 수 있는 compile-time transforms을 제공합니다.

 

<script setup>
let count = $ref(0)

function increment() {
  // no need for .value
  count++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>