import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/ru/functional/# Реактивные классы (Ref)'/>

# Реактивные классы (Ref)

Реактивные версии базовых классов созданы для бесшовной интеграции с **Vue 3 (Composition API)**.

## Особенности

Основная идея заключается в том, что класс сам следит за изменениями входных данных и предоставляет готовые `ComputedRef` для использования в шаблонах. Это избавляет от необходимости вручную пересчитывать значения при смене локали или входных переменных.

## Доступные классы

- `GeoRef` — Управление глобальной локалью (страна, язык) и ее реактивным состоянием.
- `DatetimeRef` — Реактивная работа с датами, форматирование и вычисление компонентов времени.
- `GeoIntlRef` — Реактивное форматирование чисел, валют, списков и относительного времени.
- `EventRef` — Управление слушателями событий с автоматической привязкой к реактивным элементам.
- `GeoFlagRef` — Реактивное получение ссылок на флаги стран и списков государств.

## Как с ними работать

В отличие от базовых классов из `functional-basic`, которые работают с прямыми значениями, классы с суффиксом `Ref` принимают на вход как обычные данные, так и `ref`. Внутри они настраивают наблюдение (`watch`) таким образом, что любое изменение источника автоматически обновляет все зависимые вычисляемые свойства.

Глобальное состояние приложения управляется через статический класс `GeoRef`. Его методы возвращают реактивные данные о текущей стране и языке, а вызов `GeoRef.set()` мгновенно обновляет форматирование во всех остальных классах, таких как `GeoIntlRef` или `DatetimeRef`.

```javascript
import { ref } from 'vue'
import { GeoRef, DatetimeRef, GeoIntlRef } from '@dxtmisha/functional'

// 1. Глобальное управление (GeoRef)
const country = GeoRef.getCountry() // Всегда актуальный код страны

// 2. Реактивная обертка над датой (DatetimeRef)
const dateRaw = ref('2024-03-21')
const date = new DatetimeRef(dateRaw)
const displayDate = date.locale() // Автоматически обновится при изменении dateRaw или локали

// 3. Форматирование на лету (GeoIntlRef)
const price = ref(12500)
const intl = new GeoIntlRef()
const displayPrice = intl.currency(price, 'RUB')
```

Этот же подход используется в `EventRef` для работы с событиями. Если целевой элемент (`ref`) меняется или временно становится `null`, класс сам переподключит слушатели, как только элемент снова появится в DOM. Вам не нужно следить за жизненным циклом элементов вручную — достаточно передать ссылку на объект.

```javascript
import { ref } from 'vue'
import { EventRef } from '@dxtmisha/functional'

const buttonRef = ref(null)

// Слушатель сам найдет кнопку, когда Vue привяжет ее к buttonRef
new EventRef(buttonRef, null, 'click', () => {
  console.log('Клик обработан реактивно')
})
```
