Руководство по интервью на Big Factory 2020 — Vue

Vue.js

Управляемое чтение

Некоторые базовые знания о Vue и связанных с ним принципах реализации всегда были популярными темами на собеседованиях.Серия статей будет опубликована в публичном аккаунте «Front-end Xiaoyuan», который можно добавить, отсканировав QR-код внизу статьи на WeChat.

Уведомление: Что касается лежащих в основе принципов реализации, рекомендуется изучить исходный код. Некоторые принципы относительно сложны, и их трудно понять в деталях из статьи. В конце концов, это может быть понято только наполовину. когда вы задаете подробные вопросы во время интервью, вы будете разоблачены.
Эта статья предназначена в основном для того, чтобы разобраться с возможными моментами собеседования Vue.Обычно необходимо обращать внимание на накопление и запас знаний, чтобы с легкостью справляться с работой и собеседованиями.В некоторых темах будут даны соответствующие ссылки для детального изучения.

Проблемы, связанные с коммуникацией компонентов

1. Каковы способы связи компонентов?

Взаимодействие компонентов родитель-потомок:

propsа такжеevent,v-model,.sync,ref,$parentа также$children

Коммуникация между родительскими и дочерними компонентами:

$attrа также$listeners,provideа такжеinject,eventbus, через корневой экземпляр$rootдоступ,vuex,dispatchа такжеbrodcast

Способ общения — относительно простой вопрос на собеседовании.Подробности см. в моей статье——Коммуникации компонента Vue достаточно, чтобы прочитать это

2. Почему дочерний компонент не может изменить свойство, переданное родительским компонентом?

Vue поддерживает односторонний поток данных, то есть родительскийpropsОбновления будут передаваться дочерним компонентам, но не наоборот. Это делается для предотвращения случайного изменения состояния родительского компонента, что затрудняет понимание потока данных приложения. Если односторонний поток данных нарушен, стоимость отладки может быть очень высокой, если приложение сложное.

3. Как v-model реализует двустороннюю привязку?

v-modelОн используется для создания двусторонней привязки к элементам управления или компонентам формы.v-bindа такжеv-onсинтаксический сахар для использования в компонентеv-model, по умолчанию будет привязка компонента с именемvalueизpropи назвалinputмероприятие.
статья--Коммуникации компонента Vue достаточно, чтобы прочитать этоОн также подробно описан в

4. В чем разница между Vuex и чистым глобальным объектом?

Между Vuex и глобальными объектами есть два основных отличия:

  1. Хранилище состояния Vuex является реактивным. Когда компонент Vue считывает состояние из хранилища, если состояние в хранилище изменяется, соответствующий компонент будет эффективно обновлен соответствующим образом.
  2. Состояние в магазине нельзя изменить напрямую. Единственный способ изменить состояние в хранилище — это явно зафиксировать мутации. Это позволяет нам легко отслеживать каждое изменение состояния, позволяя нам реализовать некоторые инструменты, которые помогут нам лучше понять наше приложение.

5. Почему в мутации Vuex нельзя выполнять асинхронные операции?

Единственный способ для всех обновлений состояния в Vuex — это мутация, а асинхронные операции реализуются через действие для отправки мутации, что позволяет нам легко отслеживать изменение каждого состояния, чтобы мы могли реализовать некоторые инструменты, которые помогут нам лучше понять наше приложение.

После выполнения каждой мутации она будет соответствовать новому изменению состояния, чтобы инструменты разработки могли сделать снимок и сохранить его, а затем реализовать путешествие во времени. Если мутация поддерживает асинхронные операции, нет возможности узнать, когда обновляется состояние, и невозможно хорошо отследить состояние, что усложняет отладку. Ссылаясь на ответ Youda:Ууху. Call.com/question/48…

Проблемы, связанные с жизненным циклом

1. Каковы хуки жизненного цикла для компонентов vue?

beforeCreate, созданный, beforeMount, смонтированный, beforeUpdate, обновленный, beforeDestroy, уничтоженный.
<keep-alive>Имеет свои собственные независимые функции хука, активируемые и деактивируемые.

2. Каков порядок выполнения обработчиков жизненного цикла родительского и дочернего компонентов Vue?

Процесс рендеринга:
Установка родительского компонента, на котором подобное после завершения подсайдена установлено, завершены, родительский компонент считается законченной загрузкой, родительский элемент, установленный в подсагбличности после создания
родитель beforeCreate -> созданный родитель -> родитель beforeMount -> дочерний beforeCreate -> созданный дочерний элемент -> дочерний beforeMount -> смонтированный дочерний элемент -> смонтированный родительский элемент

Процесс обновления подкомпонента:

  1. Влияет на родительский компонент: родитель до обновления -> дочерний перед обновлением -> дочерний обновлен -> родительский обновлен
  2. Не влияет на родительский компонент: дочерний элемент перед обновлением -> дочерний элемент обновлен

Процесс обновления родительского компонента:

  1. Влияет на дочерние компоненты: родитель до обновления -> дочерний перед обновлением -> дочерний обновлен -> родительский обновлен
  2. Не влияет на дочерние компоненты: родитель перед обновлением -> родитель обновлен

Процесс уничтожения:
родитель перед уничтожением -> дочерний перед уничтожением -> дочерний уничтожен -> родитель уничтожен

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

Роль связанных атрибутов и сравнение похожих атрибутов

1. В чем разница между v-show и v-if?

v-ifСлушатели событий и подкомпоненты условного блока уничтожаются и перестраиваются в процессе переключения. Если начальное условие ложно, ничего не будет сделано, пока условие не станет истинным в первый раз. Блок не визуализируется.
v-showПросто переключатель на основе css, независимо от того, какие начальные условия будут отображаться.
так,v-ifПереключение дороже, аv-showПервоначальные накладные расходы на рендеринг более дорогие.Когда требуется частое переключение или некоторые DOM, которые нужно переключать, сложны, используйтеv-showболее подходящий. Используйте, если вы редко переключаетесь после рендерингаv-ifболее подходящий.

2. В чем разница между вычислением и просмотром?

computedВычисляемое свойство — это вычисляемое значение, которое зависит от других свойств и имеет кэш, который обновляется только при изменении значения зависимости.
watchЭто когда отслеживаемое свойство изменяется, выполняйте некоторую логику в обратном вызове.
так,computedПодходит для рендеринга шаблонов, значение вычисляется на основе других реагирующих объектов или даже вычисляемых свойств, иwatchОн подходит для отслеживания изменения определенного значения для выполнения сложной бизнес-логики.

3. computed vs methods

Вычисляемые свойства кэшируются на основе их реактивных зависимостей и оцениваются только при изменении зависимостей при использованииmethods, соответствующий метод будет выполняться каждый раз.

4. Какова функция keep-alive?

keep-aliveКогда компонент переключается, состояние компонента, который он обертывает, может быть сохранено, чтобы он не был уничтожен, предотвращая множественные рендеринги.
Он имеет две независимые функции ловушки жизненного цикла, активируемые и деактивируемые с использованиемkeep-aliveОбернутый компонент не будет уничтожен при переключении, а будет закэширован в памяти и будет выполнен хук deactived, после попадания в кеш и рендеринга будет выполнен хук actived.

5. Какие проблемы может вызвать v-html в Vue

Динамическое отображение произвольного HTML на веб-сайте может легко привести к XSS-атакам. Поэтому используйте v-html только для надежного контента и никогда для контента, отправленного пользователями.

Темы, связанные с принципиальным анализом

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

1. Принцип отзывчивости Vue

Если вам зададут этот вопрос на собеседовании и описание будет непонятным, вы можете прямо нарисовать эту картинку официального документа Vue, и объяснять будет лучше на фоне картинки.

Отзывчивость Vue достигается за счетObject.definePropertyЗахватите данные и реализуйте их в сочетании с шаблоном наблюдателя. Эксплойт VueObject.definePropertyСоздаватьobserveзахватывать и отслеживать все атрибуты и преобразовывать все эти атрибуты вgetterа такжеsetter. Vue 中每个组件实例都会对应一个watcherНапример, он будет передавать используемые свойства данных во время рендеринга компонента.getterсобраны как зависимости. Впоследствии, когда зависимостьsetterПри срабатывании он уведомитwatcher, вызывая повторный рендеринг связанного с ним компонента.

2. Каковы недостатки Object.defineProperty?

Этот вопрос также можно задать как «Почему vue3.0 использует прокси для реализации отзывчивости?» Фактически, это сравнение Object.defineProperty и реализации прокси-реагирования.

  1. Object.definePropertyможет только захватить свойства объекта, иProxyявляется прямым прокси-объектом
    из-заObject.definePropertyТолько свойства могут быть захвачены, и каждое свойство объекта необходимо обойти. а такжеProxyОбъекты могут быть проксированы напрямую.
  2. Object.definePropertyДобавление свойств необходимо выполнять вручнуюObserve, из-заObject.definePropertyУгон — это свойство объекта, поэтому при добавлении свойств нужно снова пройтись по объекту, а затем использовать новые свойстваObject.definePropertyугон. Именно по этой причине использование Vue даетdataПри добавлении свойств к массиву или объекту вvm.$setЧтобы новые свойства также реагировали.
  3. ProxyПоддерживается 13 операций перехвата, которыеdefinePropertyне имеет.
  4. Новый стандартный бонус за производительность
    ProxyВ качестве нового стандарта в долгосрочной перспективе движок JS будет продолжать оптимизироватьProxy,ноgetterа такжеsetterЦелевой оптимизации не будет.
  5. ProxyПлохая совместимость В настоящее время нет полной поддержкиProxyСхема полифилла для всех перехватываемых методов

Для более подробного сравнения вы можете просмотреть мою статьюПочему Vue3.0 больше не использует defineProperty для реализации мониторинга данных?

3. Как обнаружить изменения массива в Vue?

ВьюObserverМассив обрабатывается отдельно, метод массива компилируется и присваивается свойству массива__proto__С точки зрения атрибутов, из-за механизма цепочки прототипов, если вы найдете соответствующий метод, вы не будете продолжать поиск. В методе компиляции будут некоторые методы, которые будут увеличивать индекс (push,unshift,splice) для ручного наблюдения. Подробности смотрите в моей статьеПочему Vue3.0 больше не использует defineProperty для реализации мониторинга данных?, который имеет подробный анализ исходного кода.

4. Почему данные компонента должны быть записаны в функциональной форме?

Все компоненты Vue можно использовать повторно.После того, как компонент создан, его можно повторно использовать в нескольких местах, независимо от того, сколько раз он используется повторно.dataОни должны быть изолированы друг от друга и не влиять друг на друга, поэтому каждый раз при повторном использовании компонентаdataЕго следует повторно использовать один раз, и каждый повторно используемый компонентdataИзменения не должны влиять на данные других повторно используемых компонентов.
Чтобы добиться этого эффекта,dataЭто не может быть простой объект, но в виде возвращаемого значения функции, поэтому каждый экземпляр компонента может поддерживать независимую копию данных, не влияя друг на друга.

5. Для чего используется nextTick и каков его принцип?

Предпосылкой для того, чтобы четко ответить на этот вопрос, является понимание процесса EventLoop.
Выполнить отложенный обратный вызов после окончания следующего цикла обновления DOM, используемый сразу после изменения данных.nextTickчтобы получить обновленный DOM.
nextTickДля реализации микрозадачи он сначала проверит, поддерживает ли онPromise, если он не поддерживается, он будет напрямую указывать на задачу макроса, и реализация задачи макроса сначала обнаружит, поддерживается ли онаsetImmediate(версия IE и высокая поддержка Etage), не поддерживает обнаружение поддержки для перехода к MessageChannel, если не поддерживает, в конечном итоге понижен доsetTimeout0;
По умолчанию он начинается сmicro taskСпособ выполнения, потому что микро задача может быть выполнена все в одном тике, которая имеет лучшую производительность в некоторых сценах с перерисованием и анимацией.
Однако из-за высокого приоритета микрозадачи в некоторых случаях она может запускаться во время всплытия событий, вызывая некоторые проблемы (см. этот выпуск Vue:GitHub.com/v UE JS / V UE / я ...), поэтому в некоторых местах принудительно используются задачи макросов (например,v-on).

Примечание: причина, по которойnextTickФункция обратного вызова помещается в массив для одноразового выполнения, а не напрямую вnextTickФункция обратного вызова выполняется для того, чтобы гарантировать, что она будет выполняться несколько раз в одном и том же тике.nextTcikНе будет открывать несколько асинхронных задач, но эти асинхронные задачи вдавливаются в синхронную задачу, которая завершается в течение следующего тика.

6. Принцип компиляции шаблонов Vue

Процесс компиляции шаблона vue делится на 3 этапа:

  1. Шаг 1: Анализ
    Строка шаблона анализируется для создания AST, а сгенерированные узлы элементов AST имеют в общей сложности 3 типа: 1 — общий элемент, 2 — выражение и 3 — обычный текст.
  2. Шаг 2. Оптимизируйте синтаксическое дерево
    Не все данные в шаблоне Vue являются адаптивными, есть много данных, которые никогда не изменятся после первого рендеринга, поэтому DOM, сгенерированный этой частью данных, не изменится, процесс патча мы можем пропустить.

На этом этапе сгенерированное дерево AST будет пройдено в глубину, чтобы определить, является ли каждое из его поддеревьев статическим узлом.Если это статический узел, их никогда не нужно будет изменять для создания DOM, что значительно оптимизирует обновление шаблоны во время выполнения эффект.

  1. сгенерировать код
const code = generate(ast, options)

пройти черезgenerateметод генерации astrenderфункция. Для получения дополнительной информации об AST, принципе компиляции шаблона Vue и принципе работы Babel, связанного с AST, я нахожусь вОсвойте AST, больше не боясь вопросов о компиляции Babel, Vue, Prettier и других принципах.представлен подробно.

7. Какова функция клавиши в v-for?

Чтобы четко ответить на этот вопрос, вам нужно сначала понять процесс сравнения Vue.Что касается принципа сравнения, я рекомендую статьюno.OSCHINA.net/U/3060934/no…

keyдля каждогоvnodeуказанный уникальныйid, на том же уровнеvnodeВо время процесса Diff вы можетеkeyБыстрое сравнение, чтобы определить, является ли это одним и тем же узлом, и использоватьkeyУникальность может генерироватьmapчтобы получить соответствующий узел быстрее.
Укажите дополнительноkeyПосле этого стратегия «повторного использования на месте» больше не используется, что может обеспечить точность рендеринга.

8. Почему v-for и v-if не рекомендуются вместе

когдаv-forа такжеv-ifв том же узле,v-forсоотношение приоритетовv-ifвыше, значитv-ifбудет повторяться отдельно для каждогоv-forв цикле. Если массив для обхода велик, а фактические данные для отображения очень малы, это приведет к большим потерям производительности.
Рекомендуется использовать этот сценарийcomputedсначала фильтруйте данные.

Проблемы, связанные с маршрутизацией

1. Что такое защита навигации Vue-router?

Глобальные pre/хуки: beforeEach, beforeResolve, afterEach

Эксклюзивная защита маршрута: beforeEnter

Guards в компонентах: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

Полный процесс анализа навигации выглядит следующим образом:

  1. Навигация вызвана.
  2. Вызвать охрану выхода в деактивированном компоненте.
  3. Вызов глобального охранника перед каждым.
  4. Вызовите защиту beforeRouteUpdate (2.2+) в повторно используемом компоненте.
  5. Вызовите beforeEnter в конфигурации маршрутизации.
  6. Разобрать компоненты асинхронной маршрутизации.
  7. Позвоните BeForereTeenter на активированном компонент.
  8. Вызов глобальной функции BeforeResolve Guard (2.5+).
  9. Навигация подтверждена.
  10. Вызовите глобальный хук afterEach.
  11. Запустить обновление DOM.
  12. Вызовите функцию обратного вызова, переданную next в стороже beforeRouteEnter с созданным экземпляром.

2. В чем разница между режимом хеширования vue-router и режимом истории?

разница:

  1. В отображении URL-адреса режим хеширования имеет «#», а режим истории — нет.
  2. Когда страница обновляется, хеш-режим может нормально загружаться на страницу, соответствующую хэш-значению, но если история не обрабатывается, будет возвращено 404. Как правило, бэкенду необходимо настроить все страницы для перенаправления на домашнюю страницу. маршрут страницы.
  3. совместимость. hash может поддерживать более ранние версии браузеров и IE.

3. Как реализованы режим хеширования и режим истории vue-router?

хэш-режим:
#Последующее изменение значения хеша не приведет к тому, что браузер отправит запрос на сервер, если браузер не отправит запрос, страница не будет обновлена. В то же время, прослушивая событие hashchange, вы можете узнать, какие изменения произошли с хэшем, а затем обновить часть содержимого страницы в соответствии с изменением хэша.

Режим истории:
История реализации, основной стандарт HTML5 опубликован двумя API,pushStateа такжеreplaceState, эти два API могут изменить URL-адрес, но не будут отправлять запрос. Таким образом, вы можете отслеживать изменения URL-адреса, чтобы реализовать операцию обновления части содержимого страницы.

оvue-routerРаздел, Рекомендуемые статьиnuggets.capable/post/684490…

Эта статья является первой из серии статей «Рекомендации по проведению интервью с большой фабрикой в ​​2020 году». Последующая серия статей будет обновляться. Пожалуйста, обратите внимание на мой публичный аккаунт [Front-end Xiaoyuan]. Если у вас есть какие-либо вопросы, пожалуйста, добавьте мой личный WeChat yu_shihu_ для связи

Категории