|
|
@@ -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)
|
