PricingLoginStart free
Vue Academy · Урок

ref и reactive: когда использовать каждый

Доступ к ref.value, автоматическое извлечение reactive в шаблонах, toRefs(), toRef() для деструктуризации

Урок 3 из 413 шагов

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

Два инструмента реактивности

Vue предлагает два основных способа создания реактивного состояния: ref() и reactive(). Они частично пересекаются, но каждый лучше подходит для определенных ситуаций. Если знать, когда использовать каждый из них, код будет чище.

ref работает с любым значением

ref() может оборачивать что угодно: число, строку, логическое значение, массив или объект. В JavaScript значение хранится в .value.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref автоматически извлекает значения в шаблонах

В JavaScript необходимо писать .value, но в шаблоне значение рефа верхнего уровня извлекается автоматически. Поэтому {{ count }} просто работает.

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive предназначен для объектов

reactive() принимает только объекты, включая массивы и Map. Он возвращает глубоко реактивный прокси-объект, свойства которого доступны напрямую — без .value.

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive обеспечивает глубокую реактивность

Вложенные объекты и массивы внутри объекта reactive также являются реактивными. Изменение вложенного свойства запускает обновления без дополнительных действий.

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

Ограничение reactive: деструктуризация нарушает реактивность

Если деструктурировать объект reactive, извлеченные переменные станут обычными значениями и потеряют реактивность. Это самая распространенная неожиданная особенность.

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

Решение: toRefs для безопасной деструктуризации

toRefs() преобразует каждое свойство реактивного объекта в реф. Теперь Вы можете деструктурировать объект, сохранив реактивность, поскольку каждый элемент остается рефом, связанным с исходным объектом.

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

toRef для отдельного свойства

Если Вам нужно представить в виде рефа только одно свойство, используйте toRef(state, 'key'). Оно остается синхронизированным с исходным объектом в обоих направлениях.

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

Практическое правило

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

ref также может содержать объекты

Для объектов не обязательно выбирать reactive. ref, содержащий объект, тоже обеспечивает глубокую реактивность — просто обращаться к нему нужно через .value. Многие команды используют ref повсюду для единообразия.

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

Сводная таблица

  • ref: любое значение, в JS требуется .value, в шаблоне значение извлекается автоматически, можно полностью заменить содержимое.
  • reactive: только объекты, без .value, глубокая реактивность, но деструктуризация нарушает ее работу, а сам объект нельзя заменить.
  • toRefs: связующее средство, позволяющее деструктурировать свойства реактивного объекта.

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

Выберите подходящий инструмент.

Ответь в интерактивном уроке

Итоги

Главное:

  • ref() оборачивает любое значение, а в JavaScript требует использования .value.
  • reactive() предназначен для объектов и обеспечивает глубокую реактивность, но деструктуризация нарушает ее работу.
  • toRefs() позволяет безопасно деструктурировать реактивный объект.
  • Используйте ref для примитивов, а reactive — для состояния, сгруппированного в объект.
Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
42
Уроки
156
Начать учиться бесплатноПосмотреть полный курс

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

Урок «ref и reactive: когда использовать каждый» бесплатный?

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

Чему я научусь в уроке «ref и reactive: когда использовать каждый»?

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

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

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

Сколько времени занимает урок «ref и reactive: когда использовать каждый»?

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

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

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

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

  1. Зачем нужен Composition API
  2. Функция setup() и реактивные переменные
  3. ref и reactive: когда использовать каждый
  4. Computed и Watch в Composition API
← Назад к Vue Academy