Reactive vs Ref в Vue 3: В чем разница?

Среди этих инструментов reactive и ref являются двумя ключевыми методами создания реактивного состояния. Хотя на первый взгляд они могут показаться похожими, понимание их различий необходимо для написания чистого и эффективного кода Vue.

В этой статье мы перечислим различия между reactive и ref методами, а также приведем практические примеры, которые помогут вам решить, когда использовать каждый из них.

Что такое `reactive`?

reactive — это метод, предоставляемый Vue 3, который создает глубоко реактивный объект. Он преобразует свойства объекта в реактивные данные, то есть любые изменения этих свойств вызовут обновления в пользовательском интерфейсе. Синтаксис reactive выглядит следующим образом:

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'John Doe',
    age: 30
  }
});

state.count++; // Updates the UI
state.user.name = 'Jane Doe'; // Updates the UI

Reactive лучше всего работает с объектами, включая массивы, и обладает глубокой реактивностью, что означает, что все вложенные свойства объекта становятся реактивными.

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

Что такое `ref`?

ref — еще один метод, предоставляемый Vue 3, но он создает реактивную ссылку на одно значение. В отличие от reactive, ref предназначен для обработки примитивных типов данных, таких как строки, числа и логические значения, а также отдельных объектов. Синтаксис refвыглядит следующим образом:

import { ref } from 'vue';

const count = ref(0);
const userName = ref('John Doe');

count.value++; // Updates the UI
userName.value = 'Jane Doe'; // Updates the UI

refработает для примитивных значений и отдельных объектов и поставляется с реактивным .value свойством-оболочкой, которое обеспечивает доступ к фактическому значению.

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

Reactive против Ref

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

Пример 1: Reactive объект против ref для примитивных значений

import { reactive, ref } from 'vue';

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

// Incrementing values
reactiveState.count++; // Directly updates the object property
refCount.value++; // Updates the .value property

Пример 2: Reactive массив против Ref массива

const reactiveArray = reactive([1, 2, 3]);
const refArray = ref([1, 2, 3]);

reactiveArray.push(4); // Reactivity works on array mutations
refArray.value.push(4); // Need .value for array operations

Пример 3: Использование reactive для вложенного состояния

const reactiveUser = reactive({
  profile: {
    name: 'Alice',
    age: 25
  }
});

const refUser = ref({
  profile: {
    name: 'Alice',
    age: 25
  }
});

reactiveUser.profile.age = 26; // Automatically reactive at all levels
refUser.value.profile.age = 26; // Requires .value

Совместное использование `reactive`и`ref`

В реальных приложениях вы часто будете использовать reactiveи ref вместе. Например, вы можете использовать reactiveдля управления сложным объектом и refдля одного значения состояния.

const state = reactive({
  items: [],
  loading: ref(false)
});

state.loading.value = true;
state.items.push({ id: 1, name: 'Item 1' });
state.loading.value = false;

Эту функцию, вероятно, можно было бы реализовать с помощью только одной утилиты Vue 3, но создатели этого замечательного фреймворка уже подумали об этом и решили разделить ее, чтобы дать нам больше гибкости :)

Резюме

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

Поэкспериментируйте с обоими вариантами в своих проектах, чтобы найти баланс, который лучше всего подходит вашему стилю разработки.

Reactive vs Ref в Vue 3

Что такое reactive?

Что такое ref?