👉 @frontendInterview

Чем отличается Vue 3 от Vue 2?

Основные преимущества по сравнению с Vue 2:
- улучшение производительности в среднем в 1.5-2 раза
- Composition API
- совместимость с TypeScript (в т.ч. типизация шаблонов)
- новая концепция реактивности

Во Vue 2 механизм реактивности строился на «геттерах» и «сеттерах».
Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект и позволяет «перехватывать» обращения к нему.
Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством.

👉 @frontendInterview

Software Design by Example: A Tool-Based Introduction with JavaScript (2022)

Лучший способ изучения дизайна в любой области - это изучение примеров. Книга даёт представление о том, как думают опытные программисты. Начиная с системы резервного копирования файлов и фреймворка для тестирования и заканчивая макетом регулярных выражений, механизмом верстки браузера и очень маленьким компилятором, мы исследуем общие модели проектирования, показываем, как упрощение тестирования кода облегчает его повторное использование, и помогаем читателям понять, как работают отладчики, профилировщики, менеджеры пакетов и системы контроля версий, чтобы они могли использовать их более эффективно.

👉 @frontendInterview

Beginner Series #2 Clock

Часы показывают h часов, m минут и s секунд после полуночи.
Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.

Пример:
h = 0
m = 1
s = 1
result = 61000

👉 @frontendInterview

​Перечислите методы жизненного цикла компонента Vue

- beforeCreate: Вызывается синхронно сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий.

- created: Вызывается синхронно после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил наблюдение за данными, вычисляемые свойства, методы, коллбэки методов-наблюдателей и событий. Однако, фаза монтирования ещё не начата и свойство $el на данный момент недоступно.

- beforeMount: Вызывается непосредственно перед начало монтирования: функция render будет вызываться в первый раз. Не вызывается при отрисовке на стороне сервера.

- mounted: Вызывается после монтирования экземпляра. vm.$el установлено. Если необходимо подождать, пока не будут отрисованы и все дочерние, то можно воспользоваться vm.$nextTick внутри mounted.

- beforeUpdate: Вызывается при изменении данных, перед обновлением DOM. Это удобное место для получения доступа к существующему DOM перед обновлением, например, чтобы вручную удалить добавленные слушатели событий. Не вызывается при отрисовке на стороне сервера, потому что на стороне сервера выполняется только первоначальная отрисовка.

- updated: Вызывается после того, как обновится виртуальный DOM вследствие изменений данных.
DOM компонента будет уже обновлён к моменту вызова этого хука, поэтому здесь можно выполнять операции связанные с DOM. Тем не менее, старайтесь избегать изменения состояния в этом хуке. Для реагирования на изменения состояния лучше использовать вычисляемые свойства или отслеживание с помощью методов-наблюдателей.
Обратите внимание, что updated не гарантирует, что все дочерние компоненты также были перерисованы. Если необходимо подождать, пока дочерние компоненты не будут повторно отрисованы, можно воспользоваться vm.$nextTick внутри updated.
Не вызывается при отрисовке на стороне сервера.

- activated: Вызывается при активации компонента внутри <keep-alive>. Не вызывается при отрисовке на стороне сервера.

- deactivated: Вызывается после деактивации компонента внутри <keep-alive>. Не вызывается при отрисовке на стороне сервера.

- beforeUnmount: Вызывается перед демонтированием экземпляра компонента. На этом этапе экземпляр компонента всё ещё полностью работоспособен. Не вызывается при отрисовке на стороне сервера.

- unmounted: Вызывается после того, как экземпляр компонента размонтирован. Когда этот хук вызван, все директивы экземпляра компонента уже отвязаны, все слушатели событий удалены и все дочерние экземпляры компонентов размонтированы. Не вызывается при отрисовке на стороне сервера.

- errorCaptured: Вызывается, когда фиксируется ошибка из любого дочернего компонента. Хук получает три аргумента: ошибку, экземпляр компонента, в котором вызвана ошибка, и строку с информацией, где была зафиксирована ошибка. Хук может возвращать false, чтобы остановить дальнейшее распространение ошибки.

-renderTracked: Служит для отслеживания перерисовки виртуального DOM. Хук получает в качестве аргумента debugger event. Это событие сообщает, какая операция была отслежена в компоненте и целевой объект, а также ключ этой операции.

-renderTriggered: Вызывается при срабатывании перерисовки виртуального DOM. Подобно renderTracked в качестве аргумента получает debugger event. Это событие сообщает, какая операция вызвала перерисовку, а также целевой объект и ключ этой операции.

👉 @frontendInterview

👉 @frontendInterview

В чем разница между v-show и v-if во Vue?

1. v-if рендерит элемент в DOM-дереве только если выражение истинно, в то время как v-show рендерит его при любом условии, но скрывает при помощи CSS.

2. v-if поддерживает директивы v-else и v-else-if, в то время как v-show не имеет альтернативной директивы.

3. v-if требует больше ресурсов при переключении состояния для рендера, а v-show позволяет делать это максимально быстро, но с соответствующими ограничениями.

4. v-if поддерживает <template>, а v-show нет.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Что такое Feature-Sliced Design?

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

В Feature-Sliced Design каждая функция или модуль приложения организована в отдельный каталог, содержащий все необходимые компоненты, действия, редьюсеры и другие связанные файлы. Это помогает поддерживать модульность и изоляцию кодовой базы, упрощая разработку, тестирование и поддержку.

Проектирование с разделением функций способствует четкому разделению обязанностей и инкапсулирует функциональность в рамках отдельных функций. Это позволяет разным командам или разработчикам работать над различными функциями независимо друг от друга, не беспокоясь о конфликтах или зависимостях.

👉 @frontendInterview

Data Structures & Algorithms with JavaScript

Хорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.

👉 @frontendInterview

Извлечь домен из URL

Напишите функцию, которая принимает URL-адрес в виде строки и возвращает доменное имя из этого адреса.

Примеры:
"http://github.com/carbonfive/raygun" => "github"
"https://www.cnet.com" => "cnet"

👉 @frontendInterview

Войти в IT создали годный проект для всех Frontend разработчиков:

1️⃣ Прокачай свои навыки программирования без особых усилий
2️⃣ Каждый день на канале выходят курсы и статьи от ведущих специалистов на рынке IT
3️⃣ Больше не нужно тратить кучу времени на поиск хороших, бесплатных обучающих материалов в интернете

P.S. Мы сами уже давно подписаны и иногда берем контент у них 😏

​Какие основные функции Next.js вы знаете?

- getStaticProps: этот метод используется для получения данных во время сборки и предварительного рендеринга страницы в виде статического HTML. Он гарантирует, что данные будут доступны во время сборки и не будут изменяться при последующих запросах.

 export async function getStaticProps() {
   const res = await fetch('https://api.example.com/data');
   const data = await res.json();

   return {
     props: {
       data
     }
   };
 }

- getServerSideProps: Этот метод используется для получения данных по каждому запросу и предварительного рендеринга страницы на сервере. Его можно использовать, когда вам нужно получить данные, которые могут часто изменяться или зависят от пользователя.

 export async function getServerSideProps() {
   const res = await fetch('https://api.example.com/data');
   const data = await res.json();

   return {
     props: {
       data
     }
   };
 }

- getStaticPaths: этот метод используется в динамических маршрутах для указания списка путей, которые должны быть предварительно отрисованы во время сборки. Обычно используется для получения данных для динамических маршрутов с параметрами.
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();

const paths = posts.map((post) => ({
params: { id: post.id }
}));

return {
paths,
fallback: false
};
}

👉 @frontendInterview