반응형 API

ref()

Type

• ref 는 초기값에서 타입을 추론함.
• 타입 지정, 기본 추론 덮어쓰기 가능
• 초기값 생략시, 결과타입은 undefined 포함하는 유니온 타입.
• 모든 타입에서 사용 가능

import { ref } from 'vue'
import type { Ref } from 'vue' //타입 사용

const year = ref(2020) //타입 추론

const year: Ref<string | number> = ref('2020') //타입 명시

const year = ref<string | number>('2020') //추론 덮어쓰기

const n = ref<number>() // Ref<number|undefined>

// 타입 인터페이스
interface Ref<T> {
  value: T
}

사용법

🔖 인수를 가져와서 .value 속성이 있는 ref 객체에 래핑하여 반환 접근방법 : mounted() hook에서 사용

• 네이밍.value.함수명()
• 네이밍.value.변수명

예제

computed()

설명

🔖 반응형 계산 함수 - 연결된 파람이 바뀌면 새롭게 계산

Type

• getter로부터 반환된 값을 읽기 전용 반응형 ref 객체로 반환
• get과 set 함수가 있는 객체를 사용하면, 쓰기 가능한 ref 객체를 반환

// 읽기 전용
function computed<T>(
  getter: (oldValue: T | undefined) => T,
  // 아래의 "계산된 속성 디버깅" 링크를 참고하세요
  debuggerOptions?: DebuggerOptions
): Readonly<Ref<Readonly<T>>>

// 쓰기 가능
function computed<T>(
  options: {
    get: (oldValue: T | undefined) => T
    set: (value: T) => void
  },
  debuggerOptions?: DebuggerOptions
): Ref<T>

사용법

🔖 파라미터 : 로직을 가지고 값을 계산한 후 리턴하는 함수
      반환값 : 파라미터 함수가 반환하는 값을 가지는 Proxy 객체

• getter() 메서드
  • getter 메서드는 설정한 변수 값을 읽어오는 데 사용한다. 경우에 따라 객체 외부에서 필드 값을 사용하기에 부적절한 경우가 발생할 수 있는데, 이러한 경우에는 값을 가공한 이후에 외부로 전달하는 역할을 한다.
• setter() 메서드
  • setter 메서드는 외부에서 메서드에 접근하여 조건에 맞을 경우 데이터 값을 변경할 수 있도록 한다.

예제

import { ref, computed } from 'vue'

const author = ref({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// computed value
const publishedBooksMessage = computed(() => {
  return author.value.books.length > 0 ? 'Yes' : 'No'
})

reactive() 굳이 안씀

Type

• Object, array, Map, Set과 같은 타입에서만 사용 가능

reactive() 단점

1. 제한된 값 유형: 객체 유형(객체, 배열 및 **컬렉션 유형**에만 작동 (예: Map 및 Set). 그러나 string, number 또는 boolean과 같은 **기본 유형**을 보유할 수 없습니다.
2. 전체 객체를 대체할 수 없음: Vue의 반응성 추적은 속성 액세스를 통해 작동하므로 반응 객체에 대한 동일한 참조를 항상 유지 필수. 즉, 첫 번째 참조에 대한 반응성 연결이 끊어지기 때문에 반응성 개체를 쉽게 "대체(replace)” X
3. 분해 할당에 친화적이지 않음: 반응형 객체의 원시 타입 속성을 지역 변수로 분해하거나, 그 속성을 함수에 전달할 때, 반응성 연결이 끊어짐

import { reactive } from 'vue'

// 추론된 타입: { title: string }
const book = reactive({ title: 'Vue 3 Guide' })

// 타입 인터페이스
interface Book {
  title: string
  year?: number
}

const book: Book = reactive({ title: 'Vue 3 Guide' })

사용법

🔖 객체 자체를 반응형으로 만듬

• 네이밍.변수명

예제

const obj = reactive({ count: 0 })
obj.count++

요약

 

속성	설명
ref	원시값 할당 혹은 객체의 재할당이 필요한 경우에 활용
reactive	원시값들의 그룹화 선언이 필요할 때 주로 사용
computed	반응형 계산식 - 반응형 값이 바뀌면 자동 반영