1. Вопросы для собеседования по функциям жизненного цикла
1. Каков жизненный цикл vue?
Процесс экземпляра Vue от создания до уничтожения — это жизненный цикл. То есть с начала создания, инициализации данных, компиляции шаблонов, монтирования DOM-рендеринга, обновления-рендеринга, выгрузки и ряда процессов мы называем это жизненным циклом Vue.
2. Какова роль жизненного цикла vue
Все функции Vue реализованы на протяжении всего его жизненного цикла.Вызов соответствующих функций-ловушек на разных этапах жизненного цикла может реализовать две важные функции управления данными компонентов и рендеринга DOM. В жизненном цикле есть несколько обработчиков событий, что упрощает формирование хорошей логики при управлении процессом всего экземпляра vue.
3. Какие хуки будут срабатывать при загрузке первой страницы?
beforeCreate , создано , beforeMount , смонтированные хуки
4. Кратко опишите, для каких сценариев подходит каждый цикл?
-
beforeCreate: Перед созданием, после инициализации экземпляра на данном этапе this указывает на созданный экземпляр, в это время механизм события наблюдения за данными не сформирован, и узел DOM не может быть получен.
Методы и данные по данным, вычисленные, часы, методы недоступны.
Здесь вы можете добавить событие загрузки.
-
created: после создания этот этап заключается в том, что экземпляр создан, инициализация данных (данные, свойства, вычисление) завершена, а зависимости импортированы.
Доступ к методам и данным о вычисляемых данных методов наблюдения.
Здесь пишется событие, когда инициализация завершена, и асинхронный запрос тоже подходит для вызова сюда (запросов не должно быть слишком много, а время белого экрана не должно быть слишком долгим).
Здесь вы можете завершить событие загрузки и выполнить некоторую инициализацию, чтобы реализовать самовыполнение функции.
DOM не монтируется, если на этом этапе выполняется операция DOM, то она должна быть помещена в функцию обратного вызова Vue.nextTick().
-
beforeMount: перед монтированием, хотя конкретный элемент DOM не может быть получен, корневой узел, смонтированный Vue, был создан.Следующая операция Vue в DOM будет продолжена вокруг этого корневого элемента.
Стадия BeForemount переходна, и, как правило, проект может использоваться только один или два раза.
-
MOUNTED: Монтируем, завершаем создание ВМ.$EL и двухсторонние привязки
После монтирования DOM и рендеринга вы можете управлять смонтированным DOM в функции смонтированного хука.
Здесь вы можете инициировать внутренние запросы, получать данные и что-то делать с перехватчиками маршрутизации.
-
beforeUpdate: до того, как данные будут обновлены, данные управляют DOM.
Хотя данные не обновляются сразу после обновления данных, данные в DOM изменятся, что является ролью двусторонней привязки данных vue.
Доступ к существующей модели DOM можно получить перед обновлением, например, вручную удалив добавленные прослушиватели событий.
-
обновлено: после обновления данных виртуальный DOM повторно визуализируется и исправляется.
Компонент DOM был обновлен, исполняемый файл зависит от операций DOM.
Примечание. Не манипулируйте данными (не изменяйте свойства) в этой функции, это попадет в бесконечный цикл.
-
активировано: иногда нужно использовать при использовании vue-router
<keep-alive></keep-alive>Чтобы кэшировать состояние компонента, созданный хук в это время не будет вызываться повторно.Если нашему дочернему компоненту нужно что-то делать каждый раз, когда он загружается, его можно запустить с помощью активированного хука.
-
деактивировано:
<keep-alive></keep-alive>Используется при удалении компонента. -
beforeDestroy: Перед уничтожением,
Вы можете дать несколько советов по удалению, например: Вы уверены, что хотите удалить xx?
-
уничтожено: после уничтожения текущий компонент был удален, событие прослушивателя уничтожено, а также уничтожены компонент, событие и подэкземпляр.
В этот момент компонент исчез, и с ним ничего нельзя манипулировать.
5. Жизненный цикл родительских и дочерних компонентов
- Порядок выполнения:
- Родительский компонент запускает выполнение для поддержания, а затем запускает выполнение дочернего компонента, и, наконец, устанавливается родительский компонент.
- Если есть одноуровневые компоненты, родительский компонент начинает выполняться до beforeMount, затем одноуровневые компоненты выполняются до beforeMount по очереди, затем последовательно выполняются смонтированные компоненты и, наконец, выполняется смонтированный родительский компонент.
- Когда дочерний компонент смонтирован, родительский компонент будет смонтирован.
- Когда дочерний компонент завершит зависание, родительский компонент будет активно выполнять функцию ловушки beforeUpdated/updated один раз (только в первый раз).
- Родительский и дочерний компоненты отслеживаются отдельно на предмет изменения данных, но обновление данных в свойствах связано.
- При уничтожении родительского компонента дочерний компонент уничтожается до уничтожения родительского компонента.
- Инициализация родственных компонентов (перед монтированием) осуществляется отдельно, а монтирование осуществляется сверху вниз.
- Когда нет ассоциации данных, обновление и уничтожение между одноуровневыми компонентами не зависят друг от друга.