ref

articles/web_12.md

@@ -9,6 +9,7 @@
 * [YouTube](https://www.youtube.com/watch?v=uWDmfA7WE5Q&list=PLvTBThJr861yMBhpKafII3HZLAYujuNWw&index=23)
 * [RuTube](https://rutube.ru/video/d1acbb9d381bcfb42412be7cfc31a742/)
 
+<!-- https://gitlab.com/vuejs-club/youtube-course/cryptonomicon/-/blob/lesson9/src/App.vue?ref_type=heads -->
 
 **Расшифровка скринкаста**
 
@@ -89,7 +90,7 @@ if (graph.value.length > 5) {
 
     Пока не выбран тикер, значение равно `null`, а после выбора содержит ссылку на визуальный элемент
 
-1. Теперь, имея ссылку на визуальный элемент и зная **js** и **css** можем получить его ширину (сразу заворачиваем в вычисляемое свойство)
+1. Теперь, имея ссылку на визуальный элемент и зная **js** и **css**, можем получить его ширину (сразу заворачиваем в вычисляемое свойство)
 
     ```js
     const maxGraphElements = computed(() => {
@@ -110,13 +111,51 @@ if (graph.value.length > 5) {
 
     Но при изменении размеров экрана количество не пересчитывается. **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. 
+1. Исправить баг с переполнением (мы удаляем по одному элементу)
+1. На дополнительную оценку: исправить привязку к магическому числу `38` (размер элемента графика) используя дополнительный **ref** для элемента графика
 
 [Назад](./web_11.md) | [Дальше](./web_13.md)