[Vue.js] Vue3의 Composition API

 

0) setup()

setup()은 beforeCreate 이전에 호출되는 것이며, this를 사용할 수 없다.

첫번째인자: _, props

두번째인자: { emit, root, refs } ...

 

1) reactive()

• 객체만 받을 수 있다.
• deep 서치가 가능하다.
• 접근할 때 [.value]가 아니라 [변수이름.key]로 접근한다.
• return시 ...refs([변수이름])을 사용한다.

 

2) ref()

• reactive와 달리 원시타입을 모두 받을 수 있다.
• 원시값을 'value’라는 key로 감싸 객체를 반환시킨다. 따라서 원본 값은 ref 객체의 value 속성을 통해 접근할 수 있으며, 값을 변경할 때에도 value 속성에 접근하여 조작한다.
• ref()로 선언한 변수를 setup()안에서 사용할 때는 value 프로퍼티에 접근해야하지만, return 키워드로 반환할 때는 자동으로 래핑이 해제되어 value 프로퍼티를 사용하지 않아도 된다.

<template>
  // 여기서는 value를 붙이지 않아도 된다.
  <div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue'

export default {  
  setup() {
    const count = ref(0)
    console.log(count.value)

    return {
      count
    }
  }
}
</script>

 

💡 ref vs reactive

기능은 똑같기 때문에 코드 가독성을 위해 한가지만을 선택하여 사용하는게 좋다고 한다.

 

 

3) isRef(): ref가 어떤 값인지 확인한다.

 

4) toRefs(): reactive -> ref로 변환

 

5) toRef(): 소스가 되는 reactive 객체의 속성을 가져와 ref를 만들 수 있다.

이 때 새로 생성한 것이 아니라 참조한 것이기 때문에 원본 객체에 대해 리액티브 연결을 유지할 수 있다.

const state = reactive({
   foo: 1,
   bar: 2
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.