Чем ref отличается от reactive в Vue 3

В Vue 3 появились два новых понятия в реактивности - это ref и reactive. Разберемся, как они работают, и в чем их отличия.

Ref

Ref используется для создания реактивных ссылок на значения. Это можно сделать даже со значениями простых типов (например, String, Number и Boolean).

import { ref } from "vue";
let count = ref(0); // Создаем реактивную ссылку
console.log(count.value); // 0

count.value++; // Увеличиваем значение на 1
console.log(count.value); // 1

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

<template>
  <p>{{ count }}</p>
</template>

Reactive

Reactive преобразует объекты в реактивный объект. Он делает все свойства объекта реактивными.

import { reactive } from "vue";

let state = reactive({ count: 0 }); // Создаем реактивный объект
console.log(state.count); // 0

state.count++; // Увеличиваем значение на 1
console.log(state.count); // 1

В шаблоне Vue, вы обращаетесь к свойствам reactive как и к обычным свойствам объекта в JavaScript.

<template>
  <p>{{ state.count }}</p>
</template>

Отличия

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

Reactive с другой стороны, делает объект и все его свойства реактивными. Вы обращаетесь к его свойствам как обычно, как если бы это был обычный JavaScript объект. Это делает reactive удобным при работе с объектами, но может создать некоторые сложности при работе с примитивными значениями.

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