Что такое ref, reactive, computed и watch?

В Vue.js (и похожих реактивных фреймворках) используются следующие концепции для работы с реактивными данными:

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

  import { ref } from 'vue';
  const count = ref(0);
  count.value++;
  

• reactive — создаёт реактивный объект, который отслеживает изменения всех своих свойств.

  import { reactive } from 'vue';
  const state = reactive({ count: 0 });
  state.count++;
  

• computed — вычисляемое свойство, которое автоматически пересчитывается при изменении зависимостей и кэшируется.

  import { computed } from 'vue';
  const double = computed(() => count.value * 2);
  

• watch — наблюдатель, который следит за изменениями реактивных данных и выполняет функцию при изменении.

  import { watch } from 'vue';
  watch(count, (newVal, oldVal) => {
    console.log(`count изменился с ${oldVal} на ${newVal}`);
  });
  

Эти инструменты помогают эффективно управлять состоянием и реактивностью в приложениях.