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

Рассмотрим идею на примере

function sum_two(a, b) {
  return a + b
}

let a = 1;
let b = 2;

let sum = sum_two(a + b);

console.log(sum); // 3

a = 3;

console.log(sum); // 3

Ожидаемо мы получили на выходе два раза значение 3, т.к. после изменения одного из входных параметров функция sum_two не была вызвана второй раз. Программисту надо самостоятельно отслеживать изменения входных параметров и заного расчитывать выходные значения.

Vue.JS используя концепцию реактивности позволяет программисту избавится от необходимости вручную отслеживать все изменения данных автоматически расчитывает результат и обновляет DOM дерево при необходимости.

import { ref, computed } from 'vue';

const a = ref(1);
const b = ref(2);

const sum = computed(() => a.value + b.value);
console.log(sum.value); // 3

a.value = 3;
console.log(sum.value); // 4

В данном примере a и b обявленны как ссылки на значения а sum как вычисляемая ссылка. При изменении значения a или b Vue.JS расчитывает новое значение sum.

Vue.JS предоставляет два способа работы с реактивными данными reactive объекты и ref ссылки

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

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