5) {
graph.value.shift()
}
console.log('graphRef:', graphRef.value)
```
Пока не выбран тикер, значение равно `null`, а после выбора содержит ссылку на визуальный элемент
1. Теперь, имея ссылку на визуальный элемент и зная **js** и **css**, можем получить его ширину (сразу заворачиваем в вычисляемое свойство)
```js
const maxGraphElements = computed(() => {
if (graphRef.value == null) return 0
return graphRef.value.clientWidth / 38
})
```
И используем это свойство при формировании графика
```js
if (graph.value.length > maxGraphElements.value) {
graph.value.shift()
}
```
Работает!!!
Но при изменении размеров экрана количество не пересчитывается. **Ref не реактивен.**
1. Учёт изменения размеров браузера
* Сначала переделываем метод расчета количества элементов (вместо **computed**)
```js
function calculateMaxGraphElements () {
// реализована защита от null (когда график не отображается)
maxGraphElements.value = (graphRef.value?.clientWidth ?? 0) / 38
}
```
>Не забываем описать переменную _maxGraphElements_
* Используем подписку на события окна (в видео записано в метод **onMounted**)
```js
window.addEventListener(
'resize',
calculateMaxGraphElements)
```
* Не забываем отписаться от события в методе **onBeforeUnmount**
```js
onBeforeUnmount(() => {
window.removeEventListener(
'resize',
calculateMaxGraphElements)
})
```
>В текущей реализации размер графика равен `0`, пока мы не поменяем размер окна. Пока считаем это фичей и исправим на следующем занятии
**Заключение**
1. **ref** стоит использовать только тогда, когда задачу невозможно выполнить средствами **vue** (т.е. не надо его использовать для изменения классов или обработчиков событий)
1. **ref** не реактивен, т.е. не имеет смысла использовать его в вычисляемых свойствах
---
**Задание**
1. Реализовать задачи из скринкаста
1. Исправить баг, когда при уменьшении размера окна элементы графика становятся узкими, пока не обновится валюта
1. Исправить баг с переполнением (мы удаляем по одному элементу)
1. На дополнительную оценку: исправить привязку к магическому числу `38` (размер элемента графика) используя дополнительный **ref** для элемента графика
[Назад](./web_11.md) | [Дальше](./web_13.md)