{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Что такое компонентный подход в двух словах?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это когда приложение разбито на "},{"type":"text","marks":[{"type":"bold"}],"text":"независимые, переиспользуемые блоки"},{"type":"text","text":" (компоненты), каждый из которых отвечает за свой кусок логики и UI."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"

"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый компонент — мини-приложение внутри приложения."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🎯 Основные преимущества компонентного подхода"}]},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Повторное использование (reuse)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ты один раз создаёшь компонент — и используешь его в разных частях приложения."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например, кнопка:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Save\nDelete\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это снижает количество дублирующего кода → ускоряет разработку → уменьшает количество багов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Улучшенная читаемость и поддерживаемость"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Код разбит на маленькие кусочки — легче понять, где что происходит."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Плохо:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Хорошо:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Header.vue\nSidebar.vue\nUserList.vue\nUserItem.vue\nFooter.vue\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый файл отвечает за одну задачу → разрабатывать комфортно."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"3. "},{"type":"text","marks":[{"type":"bold"}],"text":"Изоляция логики и состояния"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент полностью самодостаточный:"},{"type":"hardBreak"},{"type":"text","text":"он хранит свои данные, методы, стили и жизненный цикл."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Изоляция = меньше случайных конфликтов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"4. "},{"type":"text","marks":[{"type":"bold"}],"text":"Лёгкое тестирование"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Тестировать маленький блок проще, чем огромный модуль."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например — протестировать компонент «Modal»:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"открывается ли по клику"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"закрывается ли по нажатию на фон"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"правильно ли отображает контент"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонентные тесты точные и быстрые."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"5. "},{"type":"text","marks":[{"type":"bold"}],"text":"Масштабируемость проекта"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда проект растёт, компонентный подход позволяет:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"легко добавлять новые фичи,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"заменять компоненты без переписывания всего приложения,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"делить работу между разработчиками."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый разработчик может работать над своим компонентом "},{"type":"text","marks":[{"type":"bold"}],"text":"без конфликтов со всеми остальными"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"6. "},{"type":"text","marks":[{"type":"bold"}],"text":"Чёткое разделение ответственности"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый компонент выполняет одну чёткую задачу (Single Responsibility Principle):"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — список"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — элемент списка"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":" — поле ввода"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это улучшает архитектуру и предотвращает «компоненты-монолиты»."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"7. "},{"type":"text","marks":[{"type":"bold"}],"text":"Лучшее управление состоянием"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В Vue легко передавать данные:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сверху вниз через "},{"type":"text","marks":[{"type":"bold"}],"text":"props"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"снизу вверх через "},{"type":"text","marks":[{"type":"bold"}],"text":"emit"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"глобально — через "},{"type":"text","marks":[{"type":"bold"}],"text":"Pinia или Vuex"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компоненты позволяют сделать data-flow понятным и контролируемым."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"8. "},{"type":"text","marks":[{"type":"bold"}],"text":"Инкапсуляция (изоляция стилей)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Каждый компонент может иметь свои стили:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Они не влияют на другие компоненты."},{"type":"hardBreak"},{"type":"text","text":"Нет конфликтов CSS, нет переопределений, нет хаоса."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"9. "},{"type":"text","marks":[{"type":"bold"}],"text":"Повышение скорости разработки"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Меньше кода → меньше ошибок"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Быстрее внедрение новых функций"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Команда может работать параллельно"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Плюс можно сделать UI-библиотеку из собственных компонентов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"10. "},{"type":"text","marks":[{"type":"bold"}],"text":"Гибкость в построении интерфейса"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компоненты составляются как кубики LEGO — собираешь интерфейс из готовых элементов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧠 Итог (шпаргалка)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Преимущества компонентного подхода:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"♻️ Повторное использование"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧹 Чистота и читаемость"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔒 Изоляция логики, стилей и состояния"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧪 Удобное тестирование"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🚀 Масштабируемость"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📦 Разделение ответственности"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔗 Контролируемый data-flow"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🎨 Инкапсуляция CSS"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚡ Быстрая и предсказуемая разработка"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

В чём преимущества компонентного подхода?

Комментарии