【Vue】refはrefをアンラップするって理解してる？

↓refでいっぱい囲っちゃえ

const num = ref(ref(ref(ref(ref(123)))))

123を出力するには、、

console.log(num.value.value.value.value.value)

かと思いきや上記は誤りでエラーとなる。。

console.log(num.value)

が正解。

---

じゃあこれは？

const obj = ref({
  num: ref(123)
})

これもアンラップされるので、

console.log(obj.value.num)

が正解。

いつ困るの？

僕の場合こんなこととしててref in refが生まれました。

const useUser = (id: number) => {
  const profile = ref<string>()
  const fetchProfile = () => {
    profile.value = 'Hello'
  }
  return {
    id,
    profile
  }
}

const id = computed(() => Number(route.params.id))
const user = ref(useUser(id.value))
watch(id, () => user.value = useUser(id.value))

refに囲われているものとそうでないものとでは元は同じ型だったとしても構造が異なってしまうので色々問題になります。

shallowRefを使おう

const obj = shallowRef({
  num: ref(123)
})
console.log(obj.value.num.value) // 123

参考