Що таке ref()?

VueJunior~1 хв читання

ref() - це функція з Composition API (Vue 3), яка створює реактивну обгортку навколо значення будь-якого типу і дозволяє Vue відстежувати його зміни.

Простіше кажучи:

ref() робить значення реактивним. Для примітивів (string, number, boolean) це єдиний спосіб зробити їх "живими" в Composition API.

Це один з ключових інструментів реактивності у Vue 3.

Як виглядає ref?

import { ref } from 'vue'

const count = ref(0)

Це створює об'єкт:

{
  value: 0        // реактивна властивість
}

Як з ним працювати?

Читання:

console.log(count.value)

Зміна:

count.value++

Vue автоматично відстежить зміну і оновить DOM.

Приклад у компоненті

vue

<script setup>
import { ref } from 'vue'

const message = ref('Hello')

function update() {
  message.value = 'Updated!'
}
</script>

<template>
  <p>{{ message }}</p>
  <button @click="update">Change</button>
</template>

Чому потрібен `.value`?

Тому що ref - це об'єкт, а реактивна властивість зберігається в ключі value.

Але у шаблонах .value не потрібен - Vue робить автоматичне "розпакування":

html

<p>{{ message }}</p>  <!-- працює -->

Для яких типів даних використовують ref()?

Примітиви

(обов'язково!)

const count = ref(0)
const name = ref('Alex')
const isVisible = ref(true)

DOM-елементи (template refs)

html

<input ref="inputEl">

const inputEl = ref(null)

Об'єкти, якщо потрібна можливість замінити весь об'єкт

const user = ref({ name: 'Alex' })
user.value = { name: 'John' } // можна замінити цілком

Чим ref() відрізняється від reactive()?

ref	reactive
для примітивів	для об'єктів
зберігається в `.value`	працює як звичайний об'єкт
можна замінити повністю	замінювати не можна (втрачається реактивність)
працює і з примітивами, і з об'єктами	лише об'єкти, масиви, Map, Set

Автоматичне пакування/розпакування ref

У шаблоні:

html

<p>{{ count }}</p>  <!-- без .value -->

При деструктуризації:

Не можна:

const { count } = form // втрачається реактивність

Правильно:

import { toRefs } from 'vue'
const { count } = toRefs(form)

Важливі нюанси

1. Мутувати `.value` можна завжди

Це тригерить оновлення UI.

2. Змінювати ref на новий об'єкт можна

(ref можна перезаписати цілком).

3. `ref` всередині об'єктів автоматично стає реактивним

Vue робить проксі-обгортку.

Підсумок (ідеально для співбесіди)

ref() - функція Composition API, що створює реактивне значення. Зберігає значення у властивості .value. Обов'язковий для примітивів у Composition API. Використовується для даних, DOM-елементів і будь-яких значень, які мають реагувати на зміни.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.