Реактивные ссылки: ref и reactive

Во Vue.js реактивность является основой построения интерфейсов. Два ключевых инструмента для работы с реактивными данными — это ref и reactive, обеспечивающие автоматическое отслеживание изменений и обновление DOM.

ref — реактивная ссылка на примитивы и объекты

Функция ref используется для создания реактивной ссылки на любое значение, включая примитивы: строки, числа, булевы значения.

import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}

Особенности ref:

  • Значение хранится в свойстве .value.
  • Любые изменения count.value автоматически вызывают обновление компонентов, где используется этот ref.
  • Может оборачивать объекты, массивы и функции. Для объектов внутри ref Vue не делает глубокую реактивность по умолчанию — применяется поверхностная реактивность.

Пример с объектом:

const user = ref({
  name: 'Иван',
  age: 30
});

user.value.age++;

Здесь изменение age также отслеживается системой реактивности.

reactive — реактивность объектов и массивов

Функция reactive предназначена для создания реактивного объекта или массива, где Vue автоматически делает все вложенные свойства реактивными.

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'Иван',
    age: 30
  }
});

state.count++;
state.user.age++;

Особенности reactive:

  • Поддерживает глубокую реактивность, включая вложенные объекты и массивы.
  • Не требует обращения к .value.
  • Не работает напрямую с примитивами; для них нужно использовать ref.

Отличия ref и reactive

Характеристика ref reactive
Поддержка примитивов Да Нет
Доступ к значению Через .value Прямой доступ
Глубокая реактивность Нет (для объектов — поверхностная) Да
Применение Примитивы, иногда объекты Объекты и массивы

Рекомендации по использованию:

  • Для отдельных примитивных значений (string, number, boolean) использовать ref.
  • Для сложных структур (object, array) предпочтительнее reactive.
  • Для реактивной работы с объектами внутри ref часто применяется toRefs или деструктуризация через reactive.

Работа с реактивными данными в шаблоне

В шаблонах Vue обращаться к реактивным переменным можно напрямую, без .value:

<template>
  <div>
    <p>Счетчик: {{ count }}</p>
    <button @click="increment">Увеличить</button>
  </div>
</template>

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

const count = ref(0);

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

Vue автоматически «разворачивает» ref в шаблоне, поэтому .value использовать не нужно. Для реактивных объектов через reactive доступ к свойствам также осуществляется напрямую.

Композиция ref и reactive

Иногда удобно комбинировать ref и reactive для разных частей состояния:

const state = reactive({
  todos: []
});

const filter = ref('all');

function addTodo(text) {
  state.todos.push({ text, done: false });
}

function setFilter(value) {
  filter.value = value;
}

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

Наблюдение и реактивные эффекты

Для создания реакций на изменения данных используют watch и computed. ref и reactive интегрируются с ними одинаково.

import { reactive, watch } from 'vue';

const state = reactive({ count: 0 });

watch(() => state.count, (newValue, oldValue) => {
  console.log(`Счетчик изменился с ${oldValue} на ${newValue}`);
});

Здесь watch отслеживает любое изменение свойства count и выполняет функцию-обработчик.

Заключение по практическому применению

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

Эти инструменты являются фундаментом Vue 3 Composition API и позволяют создавать реактивные интерфейсы без излишней сложности, обеспечивая прозрачное обновление данных и DOM.

Оглавление