Vue.js ref()

1 개요

Vue.js ref

2 JavaScript

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

3 TypeScript

import { ref } from 'vue'

// inferred type: Ref<number>
const year = ref(2020)

// => TS Error: Type 'string' is not assignable to type 'number'.
year.value = '2020'

import { ref } from 'vue'
import type { Ref } from 'vue'

const year: Ref<string | number> = ref('2020')

year.value = 2020 // ok!

// resulting type: Ref<string | number>
const year = ref<string | number>('2020')

year.value = 2020 // ok!

// inferred type: Ref<number | undefined>
const n = ref<number>()

4 같이 보기

• Vue.js computed
• Vue.js reactive()

5 참고

• https://vuejs.org/api/reactivity-core.html#ref
• https://vuejs.org/guide/typescript/composition-api.html#typing-ref