Заучивайте по 5 уроков каждый день, обязательно заучивайте и запоминайте, надеюсь немного поможет фронтенду в поиске работы
Прекрасные выходные закончились, и серия из 5 вопросов обновляется каждый день~
1. Связь между компонентами (родительско-дочерние компоненты, одноуровневые компоненты, кросс-уровневые компоненты)
【Почти необходимые вопросы】
Ниже мы опишем каждый способ связи отдельно:
(1)props / $emitДля связи между родительскими и дочерними компонентами
отец сынуprops, сын к отцу$on、$emit.
(2)refа также$parent / $childrenДля связи между родительскими и дочерними компонентами
-
ref: при использовании в обычном элементе DOM ссылка указывает на элемент DOM; при использовании в дочернем компоненте ссылка указывает на экземпляр компонента. -
$parent/$children: доступ к родительскому/дочернему экземпляру
(3)EventBus （$emit / $on）Подходит для общения между родителями и детьми, между поколениями, братьями и сестрами
Этот метод использует пустой экземпляр Vue в качестве центральной шины событий (центра событий), которая используется для запуска событий и прослушивания событий, тем самым реализуя связь между любыми компонентами, включая родительско-дочерние, межпоколенческие и одноуровневые компоненты.
(4)$attrs/$listenersДля межпоколенческого компонента коммуникации
-
$attrs: содержит привязки свойств (кроме class и style ), которые не распознаются (и не приобретаются) реквизитами в родительской области. Когда компонент не объявляет реквизиты, все привязки родительской области (кроме класса и стиля) включаются сюда, и к ним можно получить доступ черезv-bind="$attrs"Передайте внутренний компонент. Обычно используется с опцией inheritAttrs. -
$listeners: содержит прослушиватель событий v-on в родительской области (без декоратора .native). это может пройтиv-on="$listeners"Пропустить внутренние компоненты
(5)provide / injectДля межпоколенческого компонента коммуникации
Компонент-предок предоставляет переменную через провайдера, а затем внедряет переменную через вставку в компонент-потомок. API предоставления/внедрения в основном решает проблему связи между межуровневыми компонентами, но сценарии его использования в основном заключаются в том, что подкомпоненты получают состояние родительского компонента, а между межуровневыми компонентами устанавливается связь между активным предоставлением и внедрением зависимостей.
(6) vuex: идеальное решение для связи между родителем и потомком, между поколениями и родственными компонентами.
2. Представьте Vuex
Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js. Ядром каждого приложения Vuex является магазин. Магазин — это, по сути, контейнер, который содержит большую часть состояния вашего приложения.
(1) Хранилище состояния Vuex является реактивным. Когда компонент Vue считывает состояние из хранилища, если состояние в хранилище изменяется, соответствующий компонент будет эффективно обновлен соответствующим образом.
(2) Единственный способ изменить состояние в хранилище — это явно зафиксировать мутацию. Это позволяет нам легко отслеживать каждое изменение состояния.
В основном он включает в себя следующие модули:
- Состояние: здесь можно установить структуру данных, определяющую состояние приложения, и начальное состояние по умолчанию.
- Геттеры: позволяет компонентам получать данные из хранилища, вспомогательная функция mapGetters просто сопоставляет геттеры в хранилище с локальными вычисляемыми свойствами.
- Мутация: единственный способ изменить состояние в хранилище и должна быть синхронной функцией.
- Действие: используется для отправки мутаций вместо прямого изменения состояния и может содержать произвольные асинхронные операции.
- Модуль: позволяет разделить одно хранилище на несколько хранилищ и хранить их в одном дереве состояний одновременно.
3. Что такое $nextTick?
Отзывчивость vue заключается не в изменении dom сразу после изменения данных, а в обновлении dom по определенной стратегии.
nextTick должен выполнить отложенный обратный вызов после окончания следующего цикла обновления DOM.Если вы используете nextTick после изменения данных, вы можете получить обновленный DOM в обратном вызове
4. Что такое ССР?
SSR — это рендеринг на стороне сервера.也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端.
SSR имеет преимущества лучшего SEO и более быстрой загрузки в верхней части страницы. Однако у него также есть некоторые недостатки, такие как наши условия разработки будут ограничены, а рендеринг на стороне сервера поддерживает толькоbeforeCreateа такжеcreatedДва хука требуют специальной обработки, когда нам нужны некоторые внешние библиотеки расширений, а приложение рендеринга на стороне сервера также должно находиться в среде выполнения Node.js. Кроме того, сервер будет иметь большую потребность в нагрузке.
5. Какие оптимизации производительности Vue вы сделали?
Оптимизация — это большая тема, которая включает в себя множество аспектов:
этап кодирования
- Минимизируйте данные в данных, данные в данных добавят геттеры и сеттеры, а соответствующие наблюдатели будут собраны
- v-if и v-for нельзя использовать вместе
- Если вам нужно использовать v-for для привязки событий к каждому элементу, используйте делегаты событий
- Страницы SPA используют компоненты кэша поддержки активности.
- В большинстве случаев используйте v-if вместо v-show
- Ключ гарантированно будет уникальным
- Ленивая загрузка, асинхронные компоненты с использованием маршрутизации
- Защита от сотрясений, дросселирование
- Импорт сторонних модулей по запросу
- Прокрутите длинный список до области просмотра для динамической загрузки
- Ленивая загрузка изображения
SEO-оптимизация
- предварительный рендеринг
- Рендеринг на стороне сервера SSR
Оптимизация упаковки
- сжатый код
- Tree Shaking/Scope Hoisting
- Загружать сторонние модули с помощью cdn
- Многопоточная упаковка happypack
- splitChunks извлекает общедоступные файлы
- оптимизация исходной карты
Пользовательский опыт
-
Скелетонный экран
-
PWA
В соответствии с первоначальным намерением помочь фронтенду в поиске работы, я узнал из статей многих больших парней в Наггетс, Если есть какие-либо нарушения, пожалуйста, дайте мне знать