Что такое Virtual DOM?
Virtual DOM — это концепция в React, при которой создается и хранится в памяти легковесное виртуальное представление фактического DOM (Document Object Model). Это метод программирования, используемый для оптимизации производительности веб-приложений.
Когда вносятся изменения в данные или состояние компонента React, виртуальный DOM обновляется вместо того, чтобы напрямую манипулировать реальным DOM. Затем виртуальный DOM вычисляет разницу между предыдущим и обновленным состоянием компонента. Этот процесс известен под названием сравнения (diffing).
После того, как различия выявлены, React эффективно обновляет только необходимые части реального DOM, чтобы отразить изменения. Такой подход минимизирует количество фактических манипуляций с DOM и повышает общую производительность приложения.
Используя виртуальный DOM, React предоставляет способ создания динамических и интерактивных пользовательских интерфейсов, обеспечивая при этом оптимальную эффективность и скорость рендеринга.
👉 @frontendInterview
Virtual DOM — это концепция в React, при которой создается и хранится в памяти легковесное виртуальное представление фактического DOM (Document Object Model). Это метод программирования, используемый для оптимизации производительности веб-приложений.
Когда вносятся изменения в данные или состояние компонента React, виртуальный DOM обновляется вместо того, чтобы напрямую манипулировать реальным DOM. Затем виртуальный DOM вычисляет разницу между предыдущим и обновленным состоянием компонента. Этот процесс известен под названием сравнения (diffing).
После того, как различия выявлены, React эффективно обновляет только необходимые части реального DOM, чтобы отразить изменения. Такой подход минимизирует количество фактических манипуляций с DOM и повышает общую производительность приложения.
Используя виртуальный DOM, React предоставляет способ создания динамических и интерактивных пользовательских интерфейсов, обеспечивая при этом оптимальную эффективность и скорость рендеринга.
👉 @frontendInterview
👎8😁3👍1👏1
Как включить в расчёт ширины и высоты элемента его border?
Anonymous Quiz
4%
display: block
14%
box-sizing: content-box
3%
box-sizing: fit-content
80%
box-sizing: border-box
Что такое Vue.js и какие в нём основные фичи?
Vue.js - это прогрессивный open-source фреймворк для разработки пользовательских интерфейсов, который стремится быть легко внедряемым в процесс разработки. Ядро библиотеки фокусируется только на "слое отображения", потому его можно легко интегрировать с множеством библиотек и внедрить в существующие проекты.
Основные фичи
1. Виртуальный DOM: Vue использует виртуальный DOM - такой же подход, как и у других существующих фреймворков (React, Ember и т.п.). VDOM - это хранимая в памяти репрезентация оригинального HTML DOM-дерева, которая обновляется и изменяется, не затрагивая при этом оригинальный DOM.
2. Компоненты: используются для создания переиспользуемых компонентов в любых приложениях на Vue.
3. Шаблоны: Vue предоставляет возможность шаблонизации, которая связывает HTML-разметку с данными компонента и экземпляра класса Vue.
4. Реактивность: Vue дает возможность создавать реактивные односторонние и двусторонние связи данных с их отображением.
5. Роутинг: перемещение между страницами реализовано при помощи библиотеки vue-router.
6. Легковесность: Vue - один из самых легковесных фреймворков в сравнении с другими.
👉 @frontendInterview
Vue.js - это прогрессивный open-source фреймворк для разработки пользовательских интерфейсов, который стремится быть легко внедряемым в процесс разработки. Ядро библиотеки фокусируется только на "слое отображения", потому его можно легко интегрировать с множеством библиотек и внедрить в существующие проекты.
Основные фичи
1. Виртуальный DOM: Vue использует виртуальный DOM - такой же подход, как и у других существующих фреймворков (React, Ember и т.п.). VDOM - это хранимая в памяти репрезентация оригинального HTML DOM-дерева, которая обновляется и изменяется, не затрагивая при этом оригинальный DOM.
2. Компоненты: используются для создания переиспользуемых компонентов в любых приложениях на Vue.
3. Шаблоны: Vue предоставляет возможность шаблонизации, которая связывает HTML-разметку с данными компонента и экземпляра класса Vue.
4. Реактивность: Vue дает возможность создавать реактивные односторонние и двусторонние связи данных с их отображением.
5. Роутинг: перемещение между страницами реализовано при помощи библиотеки vue-router.
6. Легковесность: Vue - один из самых легковесных фреймворков в сравнении с другими.
👉 @frontendInterview
🔥7🥰2❤1
Как изменить opacity для элемента input, у которого установлен атрибут 'type' со значением "radio"?
Anonymous Quiz
86%
input[type="radio"]
7%
input:radio
3%
input:where(radio)
4%
input:is(radio)
🔥7👏3
Какие переменные доступны только внутри блока, в котором были объявлены, в JavaScript?
Anonymous Quiz
3%
Глобальные переменные
31%
Локальные переменные
64%
Переменные, объявленные с помощью ключевых слов let и const
2%
Переменные, объявленные с помощью ключевого слова var
👍14👎14
Чем отличается Vue 3 от Vue 2?
Основные преимущества по сравнению с Vue 2:
- улучшение производительности в среднем в 1.5-2 раза
- Composition API
- совместимость с TypeScript (в т.ч. типизация шаблонов)
- новая концепция реактивности
Во Vue 2 механизм реактивности строился на «геттерах» и «сеттерах».
Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект и позволяет «перехватывать» обращения к нему.
Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством.
👉 @frontendInterview
Основные преимущества по сравнению с Vue 2:
- улучшение производительности в среднем в 1.5-2 раза
- Composition API
- совместимость с TypeScript (в т.ч. типизация шаблонов)
- новая концепция реактивности
Во Vue 2 механизм реактивности строился на «геттерах» и «сеттерах».
Во Vue 3 концепция реактивности полностью построена на Proxy. Это объект, который содержит в себе другой объект и позволяет «перехватывать» обращения к нему.
Proxy во Vue 3 решает некоторые проблемы, присущие системе реактивности Vue 2. Например, добавление новых реактивных свойств в объект либо слежение за всем объектом, а не за единичным свойством.
👉 @frontendInterview
👍5❤2
Software Design by Example: A Tool-Based Introduction with JavaScript (2022)
Лучший способ изучения дизайна в любой области - это изучение примеров. Книга даёт представление о том, как думают опытные программисты. Начиная с системы резервного копирования файлов и фреймворка для тестирования и заканчивая макетом регулярных выражений, механизмом верстки браузера и очень маленьким компилятором, мы исследуем общие модели проектирования, показываем, как упрощение тестирования кода облегчает его повторное использование, и помогаем читателям понять, как работают отладчики, профилировщики, менеджеры пакетов и системы контроля версий, чтобы они могли использовать их более эффективно.
👉 @frontendInterview
Лучший способ изучения дизайна в любой области - это изучение примеров. Книга даёт представление о том, как думают опытные программисты. Начиная с системы резервного копирования файлов и фреймворка для тестирования и заканчивая макетом регулярных выражений, механизмом верстки браузера и очень маленьким компилятором, мы исследуем общие модели проектирования, показываем, как упрощение тестирования кода облегчает его повторное использование, и помогаем читателям понять, как работают отладчики, профилировщики, менеджеры пакетов и системы контроля версий, чтобы они могли использовать их более эффективно.
👉 @frontendInterview
👍7🔥2❤1
Beginner Series #2 Clock
Часы показывают h часов, m минут и s секунд после полуночи.
Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.
Пример:
👉 @frontendInterview
Часы показывают h часов, m минут и s секунд после полуночи.
Ваша задача - написать функцию, которая возвращает время с полуночи в миллисекундах.
Пример:
h = 0 m = 1 s = 1 result = 61000👉 @frontendInterview
👍1
Перечислите методы жизненного цикла компонента 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
- 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
👍10🔥4
Чему равняется высота элемента .parent в следующем примере?
Anonymous Quiz
54%
0
31%
Высоте элемента .child
15%
Растягивается на всю высоту
👍13
В чем разница между 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
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
👍7
👍16🔥7
Для чего используется свойство transition в CSS?
Anonymous Quiz
9%
Для создания анимаций цвета элементов
85%
Для определения переходного состояния между двумя состояниями элемента
6%
Для изменения позиции элемента при наведении на него курсора
👍7
Что такое Feature-Sliced Design?
Это современный архитектурный подход, используемый для организации и структурирования приложений React. Он направлен на решение проблем масштабируемости, удобства обслуживания и повторного использования путем разделения кодовой базы приложения на основе функций или модулей.
В Feature-Sliced Design каждая функция или модуль приложения организована в отдельный каталог, содержащий все необходимые компоненты, действия, редьюсеры и другие связанные файлы. Это помогает поддерживать модульность и изоляцию кодовой базы, упрощая разработку, тестирование и поддержку.
Проектирование с разделением функций способствует четкому разделению обязанностей и инкапсулирует функциональность в рамках отдельных функций. Это позволяет разным командам или разработчикам работать над различными функциями независимо друг от друга, не беспокоясь о конфликтах или зависимостях.
👉 @frontendInterview
Это современный архитектурный подход, используемый для организации и структурирования приложений React. Он направлен на решение проблем масштабируемости, удобства обслуживания и повторного использования путем разделения кодовой базы приложения на основе функций или модулей.
В Feature-Sliced Design каждая функция или модуль приложения организована в отдельный каталог, содержащий все необходимые компоненты, действия, редьюсеры и другие связанные файлы. Это помогает поддерживать модульность и изоляцию кодовой базы, упрощая разработку, тестирование и поддержку.
Проектирование с разделением функций способствует четкому разделению обязанностей и инкапсулирует функциональность в рамках отдельных функций. Это позволяет разным командам или разработчикам работать над различными функциями независимо друг от друга, не беспокоясь о конфликтах или зависимостях.
👉 @frontendInterview
👍20👎3
Data Structures & Algorithms with JavaScript
Хорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.
👉 @frontendInterview
Хорошая книга, рассчитанная для тех, кто считает, что JavaScript нужен не только для анимаций и баннеров. Из книги вы узнаете всё про классические структуры данных и алгоритмы с различными примерами реализации. В книге описана работа с алгоритмами поиска/сортировки, массивами, списками, хэш-таблицами и много других полезных тем, которые нужно знать JS-разработчику.
👉 @frontendInterview
👍1