Composition API (Utility)

isRef()

• 특정 값이 ref인지 아닌지를 검사하는 함수

import { ref, isRef } from "vue";

const count = ref(0);
console.log(isRef(count)); // true

unref()

• 특정값이 ref라면 내부의 .value를 반환
• ref가 아니라 일반 값이면 그냥 그 값을 반환

import { ref, unref } from "vue";

const message = ref("안녕하세요");
const plainText = "그냥 문자열";

console.log(unref(message)); // '안녕하세요'
console.log(unref(plainText)); // '그냥 문자열'

toRef()

• 반응형 객체(reactive object)의 특정 속성을 ref로 변환할 때 사용하는 함수

import { reactive, toRef } from "vue";

const state = reactive({
  count: 0,
  name: "민수",
});

const countRef = toRef(state, "count");

countRef.value++; // state.count 값도 같이 증가
console.log(state.count); // 1

• 이미 ref라면 그냥 다시 감싸지 않고 그대로 돌려줌

const a = ref(10);
const b = toRef(a);

console.log(a === b); // true

• getter 함수를 기반으로 한 readonly ref를 만듦
• .value로 접근은 가능하지만 값을 바꿀 수는 없음

const fooRef = toRef(() => state.count);

console.log(fooRef.value); // 항상 state.count 값을 반환

• 일반 값이면 그냥 ref()처럼 새 ref를 생성

const one = toRef(1);
console.log(one.value); // 1

toRefs()

• reactive 객체를 구조 분해해도 반응성 유지하는 데에 사용

import { reactive, toRefs } from "vue";

const state = reactive({
  count: 0,
  name: "민수",
});

// toRefs로 분리
const { count, name } = toRefs(state);

console.log(count.value); // 0
count.value++;
console.log(state.count); // 1

isReactive()

• reactive() 또는 shallowReactive()로 생성된 객체인지 확인

import { reactive, shallowReactive, isReactive } from "vue";

const reactiveObject = reactive({ name: "Vue" });
const shallowReactiveObject = shallowReactive({ name: "Vue" });

console.log(isReactive(reactiveObject)); // true
console.log(isReactive(shallowReactiveObject)); // true

toValue()

• 무조건 실제 값으로 꺼내주는 함수
• unref() 함수와 비슷하지만 getter 함수도 실행해서 반환해준다는 차이점이 있음

import { ref, computed, toValue, unref } from "vue";

const count = ref(1);
const plain = 5;
const getter = () => 10;
const comp = computed(() => 20);

console.log(toValue(count)); // 1
console.log(toValue(plain)); // 5
console.log(toValue(getter)); // 10
console.log(toValue(comp)); // 20

isReadonly()

• 어떤 값이 readonly() 또는 computed()처럼 읽기 전용(readonly)인지 확인하는 함수

import { readonly, computed, isReadonly } from "vue";

const roObj = readonly({ message: "읽기 전용 객체" });
const compVal = computed(() => 42);

console.log(isReadonly(roObj)); // true
console.log(isReadonly(compVal)); // true

isProxy()

• 어떤 객체가 reactive() 또는 readonly()에 의해 감싸진 Proxy인지 확인하는 함수

import { reactive, readonly, isProxy } from "vue";

const state = reactive({ count: 0 });
const roState = readonly(state);
const plain = { msg: "안녕" };

console.log(isProxy(state)); // true
console.log(isProxy(roState)); // true
console.log(isProxy(plain)); // false

출처: 짐코딩, 「Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"」, 인프런
출처: Vue.js