reactive объекты

Функция reactive возвращет реактивную копию объекта

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

import { reactive } from 'vue';

const state = reactive({
  count: 10,
});

reactive работает только с объектами

При необходимости работы с примитивами необходимо использовать ref

Реактивное преобразование «глубокое» — оно будет затрагивать все вложенные свойства.

import { reactive } from 'vue';

const state = reactive({
  products: {
    count: 4,
  },
});

const more_then_five_products = computed(() => state.products.count > 5); 
console.log(more_then_five_products.value); // false

state.products.count = 6;
console.log(more_then_five_products.value); // true

reactive разворачивает вложенные ref-ссылки и при этом сохраняет их реактивность.

const count = ref(1)
const obj = reactive({ count })

// ссылка будет развёрнута
console.log(obj.count === count.value) // true

// изменения будут обновлять `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// изменения будут влиять и на ссылку `count`
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

shallowReactive()

Неглубокая реализация reactive(). Реактивными становятся лишь свойства первого уровня

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

// Реактивно
state.foo++

// НЕ реактивно
state.nested.bar++
Что такое реактивность
Реактивность — концепция, которая позволяет приспосабливаться к изменениям декларативным способом.
Реактивные ref ссылки
ref ссылки позволяют работать с любыми значениями, как с объектами, так и с примитивными типами данных