Ref проти Reactive: Коли використовувати кожен з них?

Декілька людей запитують або коментують, що не знають різницю між ref та reactive. Проста і пряма відповідь на це питання: все залежить від того, що ви намагаєтесь зробити.

По-перше, важливо зрозуміти, що мета використання будь-якого з цих інструментів — це використання переваг реактивності, яку нам надає Vue. По-друге, ми можемо застосовувати деякі критерії для визначення, який із них використовувати. Давайте розглянемо:

Пункти щодо ref

• Основне використання: властивість ref рекомендована для роботи з примітивними типами JavaScript (null, undefined, String, Boolean, Number, BigInt та Symbol).
• Повне перепризначення: з ref можна повністю перепризначити значення об'єкта, використовуючи властивість .value.

Приклад практичного використання:

const users = ref([]);  
async function getUsers() {  
 users.value = await fetchUsers();  
}

У цьому випадку об'єкт users повністю замінюється при отриманні даних з fetchUsers. Це добре ілюструє ідеальний сценарій для використання ref.

Пункти щодо reactive

• Основне використання: призначено для об'єктів, і не підтримує роботу з примітивними типами безпосередньо.
• Зміна властивостей: ідеально підходить для сценаріїв, коли потрібно змінювати лише окремі властивості об'єкта. Це робить його “легшим”, ніж використання ref для об'єктів з багатьма властивостями.

Приклад практичного використання:

const person = reactive({  
 name: 'Gabriel',  
 age: 22,  
 isActive: true,  
});

В цьому прикладі можна змінювати окремі властивості об'єкта person (наприклад, person.name = 'João'), не потрібно замінювати сам об'єкт повністю.

Спільна риса цих інструментів

ref використовує reactive всередині. Тобто, якщо reactive ефективний для роботи з об'єктами, то те ж саме стосується і ref (хоча не в такій мірі).

Тепер, залишаючи теоретичну частину, давайте подумаємо на практиці. Які випадки використання для кожного з цих інструментів будуть правильними?

Коли використовувати кожен з них?

Коли використовувати ref:

• Примітивні значення, які потрібно обробляти реактивно.
• Об'єкти, які потрібно перепризначити повністю.

Коли використовувати reactive:

• Об'єкти з багатьма властивостями, що вимагають індивідуальних змін.
• Коли ви хочете мати більш зручний синтаксис для доступу та зміни властивостей (без .value).

Висновок

Як ref, так і reactive — це потужні інструменти в Vue для роботи з реактивними даними. Вибір між ними залежить від типу даних та того, як ви плануєте їх обробляти. Використовуйте ref для примітивних значень або коли потрібно повністю перепризначити об'єкт. З іншого боку, обирайте reactive для роботи з об'єктами, які мають багато властивостей та вимагають індивідуальних змін.

Оволодіння використанням ref та reactive дозволить вам максимально використовувати систему реактивності Vue, зробивши ваш код чистішим, ефективнішим та простішим для підтримки.

Перекладено з: Ref vs Reactive: Quando usar cada um?