Как работает реактивность в Vue.js?

Что такое реактивность?

Реактивность - это когда данные изменяются, Vue автоматически обновляет связанные с ними элементы интерфейса. Это достигается с помощью системы отслеживания зависимостей.

Как это работает?

• Vue отслеживает изменения в реактивных переменных.
• При изменении значения компоненты, зависящие от него, автоматически перерисовываются.
• Для работы с реактивными данными используются ref() и reactive().

ref()

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

Пример использования ref()

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

const count = ref(0);

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

• count = ref(0); — создаем реактивное значение count, равное 0.
• count.value++ — т.к. ref() требует доступа через .value, мы увеличиваем значение count именно так.
• При изменении count.value Vue автоматически обновляет шаблон (template).

reactive()

reactive() используется для создания реактивных объектов и массивов.

Пример использования reactive()

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

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

const increment = () => {
  state.count++;
};
</script>

• state = reactive({ count: 0 }); — создаем объект state с реактивным свойством count.
• state.count++ — увеличиваем значение count без .value, так как reactive() работает напрямую с объектами.
• Vue автоматически отслеживает изменения и обновляет интерфейс.

Разница между ref() и reactive()

Когда использовать?

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

Пример комбинированного подхода:

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

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

const increment = () => {
  state.count.value++;
};
</script>

• state = reactive({ count: ref(0) }); — объект state содержит реактивное значение count, созданное через ref().
• state.count.value++ — доступ к ref() внутри reactive() требует .value.
• Такой подход удобен, если часть данных в объекте должны быть примитивами с возможностью присвоения нового значения.

Итог

Vue.js предоставляет два мощных механизма для работы с реактивными данными:

• ref() — для примитивных значений и объектов с доступом через .value.
• reactive() — для работы с объектами и массивами без .value.

Оба метода можно комбинировать в зависимости от требований проекта. Выбор зависит от структуры данных и удобства работы с ними.