반응형 상태 선언하기

JavaScript 객체에서 반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있습니다.

import { reactive } from 'vue'

// 반응형 상태
const state = reactive({ count: 0 })

컴포넌트 <template>에서 반응형 객체를 사용하려면 setup()함수에서 선언하고 리턴해야 합니다.

• 반환된 상태는 반응형 객체입니다. 반응형 변환은 "깊습니다”
• 컴포넌트의 data()에서 객체를 반환할 때, 이것은 내부적으로 reactive()에 의해 반응형으로 만들어집니다.

import { reactive } from 'vue'

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

    return {
      state
    }
  }
}

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

ref로 원시값 반응형 데이터 생성하기

reactive() 함수는 객체타입에만 동작합니다. 그래서 기본타입(number, string, boolean)을 반응형으로 만들고자 할 때 ref 메소드를 사용할 수 있습니다.

import { ref } from 'vue'

const count = ref(0)

ref 메서드는 변이가능한(mutable) 객체를 반환합니다. 이 객체 안에는 value라는 하나의 속성만 포함하는데요. value값은 ref() 메서드에서 매개변수로 받은 값을 갖고 있습니다. 이 객체는 내부의 value 값에 대한 반응형 참조(reference) 역할을 합니다.

import { ref } from 'vue'

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

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

템플릿에서 사용

템플릿에서 사용할 때는 자동으로 내부 값(value)을 풀어내기(Unwarpping) 때문에 .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>

반응형 객체의 ref Unwrapping