Frontend Academy · Урок

ref() и reactive()

«ref() и reactive()» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Реактивность во Vue 3

Composition API во Vue 3 использует реактивные примитивы для отслеживания состояния. Две основные функции: ref() для примитивных значений и reactive() для объектов. Изменения этих данных автоматически обновляют пользовательский интерфейс.

ref() для примитивных значений

ref(value) оборачивает значение в реактивный контейнер. В скрипте получайте и изменяйте значение через .value. В шаблонах Vue автоматически раскрывает refs — использовать .value не требуется.

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

const count = ref(0);
const name  = ref('Alice');

function increment() {
  count.value++; // .value in script
}
</script>

<template>
  <p>{{ count }}</p>  <!-- no .value in template -->
  <button @click="increment">+</button>
</template>

reactive() для объектов

reactive(object) возвращает глубоко реактивный прокси объекта. Доступ к свойствам осуществляется напрямую — .value не требуется нигде.

<script setup>
import { reactive } from 'vue';

const form = reactive({
  email: '',
  password: '',
  rememberMe: false
});

// Mutate directly:
form.email = 'user@example.com';
</script>

<template>
  <input v-model="form.email">
</template>

ref и reactive — когда что использовать

Используйте ref() для примитивов (строк, чисел и логических значений), допускающих значение null данных и значений, возвращаемых из композаблов (их проще деструктурировать). Используйте reactive() для связанных данных, которые логически объединены в одном объекте.

Проблема деструктуризации reactive()

При деструктуризации реактивного объекта реактивность теряется, потому что извлечённые свойства становятся обычными значениями, а не реактивными refs.

const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking

// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;

toRef и toRefs

toRef(obj, 'key') создаёт ref, связанный с одним свойством. toRefs(obj) преобразует все свойства реактивного объекта в отдельные связанные refs, которые безопасно деструктурировать.

import { toRefs } from 'vue';

const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'

ref() для элементов DOM

Используйте ref(null) вместе с соответствующим атрибутом ref в шаблоне, чтобы получить реактивную ссылку на элемент DOM или экземпляр дочернего компонента.

<script setup>
import { ref, onMounted } from 'vue';

const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputEl.value?.focus(); // now the DOM element is available
});
</script>

<template>
  <input ref="inputEl" type="text">
</template>

isRef и unref

isRef(val) проверяет, является ли значение ref. unref(val) раскрывает ref или возвращает значение без изменений, если это не ref. Это полезно в композаблах, принимающих и refs, и обычные значения.

import { isRef, unref } from 'vue';

function double(val: Ref<number> | number) {
  return unref(val) * 2; // works with both ref and plain number
}

shallowRef и shallowReactive

shallowRef() является реактивным только на верхнем уровне, но не внутри. То же относится к shallowReactive() для объектов. Используйте их для оптимизации производительности, когда глубокая реактивность не нужна, например для больших неизменяемых структур данных.

Изменение reactive() и замена объекта

С reactive() изменяйте свойства напрямую. Нельзя заменить весь объект, поскольку reactive() требует сохранения той же ссылки. Для замены используйте ref(), который позволяет выполнить ref.value = newObject.

const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem];   // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassign

Глубокая реактивность

По умолчанию reactive() обеспечивает глубокую реактивность: Vue отслеживает изменения во вложенных объектах и массивах. Это удобно, но может быть затратным для очень больших объектов. В случаях, чувствительных к производительности, рассмотрите shallowReactive.

Быстрая проверка

Почему деструктуризация объекта reactive() приводит к потере реактивности?

Повторение: ref() и reactive()

ref() оборачивает примитивы; в скрипте доступ выполняется через .value, а в шаблонах значение раскрывается автоматически. reactive() делает объекты глубоко реактивными; изменяйте свойства напрямую. Деструктуризация приводит к потере реактивности — используйте toRefs(). ref(null) применяется для ссылок на элементы шаблона. shallowRef и shallowReactive — для повышения производительности. isRef и unref — для утилит композаблов.

Часто задаваемые вопросы

Урок «ref() и reactive()» бесплатный?

Да — полный текст урока «ref() и reactive()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «ref() и reactive()»?

Создавайте реактивные примитивы с помощью ref(), оборачивайте объекты в reactive(), разбирайтесь, когда использовать каждый вариант, и обращайтесь к значениям ref через .value. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «ref() и reactive()»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Frontend Academy