[vue3] Reactivity Utilities

unref

• argument 가 ref 인 경우 내부 value return

function useFoo(x: number | Ref<number>) {
  const unwrapped = unref(x) // unwrapped is guaranteed to be number now
}

toRef

• 반응성 객체에 ref 사용할 때 씀
• prop로 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

export default {
  setup(props) {
    useSomeFeature(toRef(props, 'foo'))
  }
}

toRefs

• 일반 객체에서 반응성 객체로 바꿈
• 여기서 결과 객체의 각 속성은 원본 객체의 해당 속성을 가리키는 참조
• 반응성 객체를 반환 시 용이

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

const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// The ref and the original property is "linked"
state.foo++
console.log(stateAsRefs.foo) // 2

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

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

  // logic operating on state

  // convert to refs when returning
  return toRefs(state)
}

export default {
  setup() {
    // can destructure without losing reactivity
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}

isRef

• ref 객체 값 체크

isProxy

• reactive 이거나 readonly 일 때 객체 체크

isReacitve

• reactive에 의해 만들어진 반응형 proxy 객체 체크
• 만약 프록시가 readonly로 만들어 진경우 true return
• 다른 프록시가 reactive에 의해 만들어진 다른 프록시가 감쌈

isReadonly

• readonly로 만들어진 객체가 readonly인지 체크