[Vue] unref(), toRaw()

unref()

ref() 객체로 감싼 반응형 값을 일반 값으로 변경할 수 있습니다.

const foo = ref(0)

unref(foo)

 

 

제가 개발하던 중 객체 배열을 일반 값으로 바꾸고 싶었습니다.

unref()를 사용해보았지만 반응성만 사라지고 proxy([Object])로 남아있었습니다.

이것을 구글링 한 결과 toRaw()를 한 번 더 사용하여 원본 객체로 바꿔줄 수 있었습니다.

 

toRaw()

const arr = ref([
  {name: a, age: 1},
  {name: b, age: 2},
  {name: c, age: 3},
]) // proxy([Object])

toRaw(unref(arr)) // [{...}, {...}, {...}]