Директивы — это инструмент для манипуляции DOM. Они позволяют добавлять поведение к элементам, используя специальные атрибуты. Основные директивы включают v-if, v-for, v-bind и v-model.

👉 v-if управляет отображением элементов на основе условия. Например:

<div v-if="isVisible">Показать этот текст</div>

👉 v-for используется для итерации по массивам:

<li v-for="item in items" :key="item.id">{{ item.name }}</li>

👉 v-bind связывает атрибуты с данными:

<img v-bind:src="imageSrc" alt="Image">

👉 v-model обеспечивает двустороннюю привязку данных:

<input v-model="userInput">

Директивы делают код более декларативным и управляемым.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Фрагменты позволяют группировать список дочерних элементов без добавления дополнительных узлов в DOM, что помогает избежать ненужной вложенности. Они используются для оборачивания нескольких элементов, когда компонент должен возвращать только один элемент, обеспечивая более чистую структуру кода.

✈️ Frontend собеседования

👉 DOM (Document Object Model) — это программный интерфейс для страницы, который представляет структуру документа в виде дерева объектов. Каждый элемент HTML, атрибут и текст становятся узлами в этом дереве, что позволяет скриптам динамически изменять содержание, структуру и стиль страницы.

👉 DOM обеспечивает доступ к элементам и их свойствам с помощью JavaScript. Это позволяет создавать интерактивные и динамические интерфейсы.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

💥 'use strict' — это директива, которая вводит строгий режим в JavaScript. Строгий режим изменяет семантику JavaScript, делая его более безопасным и предсказуемым.

1⃣ Во-первых, он предотвращает использование необъявленных переменных, что помогает избежать ошибок, связанных с опечатками в именах переменных.

'use strict';
x = 3.14; // Ошибка: x не объявлена

2⃣ Во-вторых, строгий режим запрещает дублирование параметров функции, что улучшает читаемость и поддержку кода.

'use strict';
function sum(a, a, c) { // Ошибка: дублирование параметров
  return a + a + c;
}

🔸 Также он запрещает использование некоторых устаревших и небезопасных функций, таких как with.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Псевдоклассы :hover и :active используются для изменения стиля элементов в зависимости от взаимодействия пользователя.

1⃣ :hover применяется, когда курсор мыши находится над элементом. Это позволяет, например, изменять цвет кнопки при наведении курсора.

button:hover {
  background-color: lightblue; /* Изменение фона кнопки при наведении */
}

2⃣ :active активируется в момент нажатия на элемент. Обычно используется для изменения стиля кнопки в момент клика.

button:active {
  background-color: darkblue; /* Изменение фона кнопки при нажатии */
}

📌 Таким образом, :hover реагирует на наведение, а :active — на нажатие.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

📌 Для просмотра истории коммитов в Git используется команда git log. Она выводит список всех коммитов в текущей ветке с информацией о каждом из них, включая хеш, автора, дату и сообщение коммита.

git log

▶️ Для более краткого вывода можно использовать флаг --oneline, который отображает каждый коммит в одну строку.

git log --oneline

▶️ Если необходимо увидеть историю коммитов для конкретного файла, используется:

git log <filename>

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Тип never в TypeScript используется для обозначения значений, которые никогда не встречаются, например, в функциях, которые выбрасывают исключения или содержат бесконечные циклы. Он помогает TypeScript выявлять логические ошибки в коде, гарантируя, что все возможные пути выполнения программы учтены.

✈️ Frontend собеседования

🔳 Next.js — это фреймворк для React, который упрощает создание SSR приложений. Он предоставляет такие возможности, как автоматическая маршрутизация, оптимизация изображений и статических файлов, а также встроенные функции для работы с API.

🔲 Next.js позволяет сосредоточиться на создании компонентов и логики приложения, обеспечивая при этом высокую производительность и SEO-оптимизацию. Благодаря этому фреймворку можно легко создавать современные веб-приложения с минимальными усилиями по настройке инфраструктуры.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Экземпляр Vue — это основная сущность, создаваемая с помощью конструктора Vue, которая управляет жизненным циклом приложения и связывает данные с DOM. Он предоставляет реактивные свойства, методы и возможности для обработки событий, что позволяет эффективно управлять состоянием и поведением пользовательского интерфейса.

✈️ Frontend собеседования

⏩ Тег <main> в HTML5 используется для обозначения основного содержимого документа. Это содержание должно быть уникальным и напрямую связано с основной темой страницы.

➡ Тег <main> помогает улучшить доступность, так как позволяет вспомогательным технологиям, таким как скрин ридеры, быстро находить основное содержание страницы.

💡 Важно помнить, что <main> не должен содержать элементы, такие как навигация или футеры. Этот тег может использоваться только один раз на странице.

<main>
  <!-- Основное содержание страницы -->
  <h1>Заголовок страницы</h1>
  <p>Основной текст статьи или контента.</p>
</main>

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Позиционирование в CSS управляет расположением элементов на веб-странице. Существует несколько видов позиционирования:

1️⃣ Static: Значение по умолчанию. Элементы располагаются в порядке их следования в коде.

2️⃣ Relative: Элемент позиционируется относительно своего обычного положения. Используются свойства top, right, bottom, left.

3️⃣ Absolute: Элемент позиционируется относительно ближайшего предка с position: relative, absolute или fixed.

4️⃣ Fixed: Элемент фиксируется относительно окна браузера и не перемещается при прокрутке.

5️⃣ Sticky: Комбинация relative и fixed. Элемент ведет себя как relative, пока не достигнет заданного порога, после чего становится fixed.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

🔸 Строгое сравнение — это метод сравнения, который учитывает как значение, так и тип данных. Используется оператор ===. В отличие от нестрогого сравнения ==, строгое сравнение не выполняет приведение типов.

const a = 5;
const b = '5';

console.log(a === b); // false, так как типы данных разные
console.log(a == b);  // true, так как происходит приведение типов

🟥 Строгое сравнение предпочтительно использовать для избежания неожиданных результатов, связанных с автоматическим приведением типов.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Для создания коммита в Git необходимо сначала добавить изменения в индекс с помощью команды git add, а затем зафиксировать их с описанием, используя команду git commit -m "сообщение коммита". Это позволяет сохранить текущие изменения в истории проекта с пояснением, что именно было изменено.

✈️ Frontend собеседования

🔥 Lazy Loading позволяет загружать компоненты только тогда, когда они действительно необходимы, что улучшает производительность приложения.

😊 Для использования Lazy Loading применяется функция React.lazy(), которая принимает функцию, возвращающую промис с импортом компонента. Компонент Suspense используется для отображения запасного контента, пока загружается ленивый компонент.

import React, { Suspense } from 'react';

// Ленивый импорт компонента
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      {/* Suspense для отображения запасного контента */}
      <Suspense fallback={<div>Загрузка...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

😊 Этот подход особенно полезен для больших приложений с множеством маршрутов или страниц.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Дженерики в TypeScript позволяют создавать компоненты, которые работают с различными типами данных, обеспечивая гибкость и повторное использование кода. Они помогают избежать дублирования кода и повышают его безопасность, предоставляя возможность задавать типы данных в момент использования функции или класса.

✈️ Frontend собеседования

▶️ Чтобы сделать картинку ссылкой в HTML, необходимо обернуть тег <img> в тег <a>. Атрибут href тега <a> указывает URL, на который будет вести ссылка.

<!-- Тег <a> оборачивает тег <img>, делая картинку кликабельной -->
<a href="https://example.com">
  <img src="image.jpg" alt="Описание изображения" />
</a>

▶️ Этот подход позволяет пользователю кликать по изображению, чтобы перейти на указанный URL.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

📝 Метод indexOf используется для поиска индекса первого вхождения указанного элемента в массиве или строке. Если элемент не найден, возвращает -1.

✅Пример использования с массивом:

// Создаем массив
const fruits = ['apple', 'banana', 'orange'];

// Ищем индекс элемента 'banana'
const index = fruits.indexOf('banana'); // Вернет 1

✅Пример использования со строкой:

// Создаем строку
const text = 'Hello, world!';

// Ищем индекс символа 'w'
const index = text.indexOf('w'); // Вернет 7

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

💾 Единицы измерения em и rem используются для задания относительных размеров, таких как шрифты и отступы.

em: Зависит от размера шрифта родительского элемента. Если размер шрифта родителя изменится, то и em изменится. Например, если родитель имеет font-size: 16px, то 2em будет равно 32px.

rem: Зависит от корневого элемента. Независимо от вложенности, rem всегда основывается на font-size корня. Если корень имеет font-size: 16px, то 2rem всегда будет 32px.

⚡️ Использование rem обеспечивает более предсказуемое масштабирование, так как оно не зависит от вложенности элементов.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Хуки в React были введены для решения нескольких проблем, связанных с управлением состоянием и жизненным циклом компонентов. Вот основные причины, почему хуки полезны:

1️⃣ Упрощение кода: Хуки позволяют использовать состояние и другие возможности React без написания классов. Это делает код более простым и легким для понимания.

2️⃣ Повторное использование логики состояния: С помощью хуков, таких как useState и useEffect, можно легко разделять и повторно использовать логику состояния между компонентами.

3️⃣ Улучшение читаемости и тестируемости: Функциональные компоненты с хуками обычно легче читать и тестировать, чем классовые компоненты с методами жизненного цикла.

4️⃣ Избежание проблем с this: В функциональных компонентах нет необходимости использовать this, что устраняет многие ошибки, связанные с контекстом вызова.

5️⃣ Управление побочными эффектами: Хук useEffect предоставляет удобный способ управлять побочными эффектами, такими как подписки или изменения DOM, в функциональных компонентах.

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования

Директива v-if полностью удаляет или добавляет элемент в DOM в зависимости от условия, что может быть полезно для оптимизации производительности, когда элемент редко отображается. В отличие от нее, v-show управляет видимостью элемента через CSS-свойство display, что делает переключение быстрее, но элемент всегда остается в DOM.

✈️ Frontend собеседования

1️⃣ Union Types позволяют объединять несколько типов, предоставляя возможность переменной принимать значения любого из указанных типов. Это полезно, когда значение может быть разного типа.

const value: string | number;
// Переменная value может быть строкой или числом

2️⃣ Intersection Types объединяют несколько типов в один, требуя, чтобы переменная соответствовала всем указанным типам. Это полезно для создания сложных типов.

type A = { a: string };
type B = { b: number };
type C = A & B;
// Тип C должен содержать свойства a и b

Ставь 👍, если было полезно!
Больше ответов на сайте 👈

✈️ Frontend собеседования