«Вопросы для интервью» 20 + Vue Вопросы для интервью

"Восприятие: 🌟🌟🌟🌟🌟"

"Вкус: Тушеные свиные ножки"

"Время приготовления: 15 мин."

Эта статья была включена вGithub github.com/Geekhyt, добро пожаловать в Звезду.

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

❝

Как вы думаете, в каком стеке технологий вы лучше всего разбираетесь?

❞

Vue, мне очень нравится Youda, недавно я выпустил первый документальный фильм о Vue, который действительно хорош.

0. Можешь тогда рассказать о MVVM?

МВВМ этоModel-View-ViewModelСокращенное название,MVCсерединаControllerэволюционировать вViewModel. Слой Model представляет модель данных, View представляет компонент пользовательского интерфейса, а ViewModel является мостом между слоями View и Model.Данные будут привязаны к слою viewModel и автоматически отображать данные на странице.При изменении представления , уровень viewModel будет уведомлен об обновлении данных.

1. Кратко расскажите о принципе адаптивных данных Vue2.x.

Когда Vue инициализирует данные, он будет использоватьObject.definePropertyПереопределить все атрибуты в данных. Когда страница использует соответствующий атрибут, она сначала выполнит сбор зависимостей (соберет текущий компонентwatcher) Если свойство изменится, оно уведомит соответствующие зависимости об обновлении операции (发布订阅).

2. Знаете ли вы принцип адаптивных данных Vue3.x?

(К счастью, я это видел, для меня это не сложно)

Вместо этого используйте Vue3.xProxyПереопределяет Object.defineProperty. Потому что Proxy может напрямую отслеживать изменения в объектах и ​​массивах, а способов перехвата целых 13. И в качестве нового стандарта производители браузеров сосредоточатся на постоянной оптимизации производительности.

❝

Прокси будет проксировать только первый слой объекта, так как же Vue3 решает эту проблему?

❞

(очень простой)

Определите, является ли текущее возвращаемое значение Reflect.get объектом, и если да, то передайтеreactiveметод в качестве прокси, Это дает возможность глубокого наблюдения.

❝

При мониторинге массива get/set может срабатывать несколько раз, так как же предотвратить множественные триггеры?

❞

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

Интервьюер поднял голову. я подумал про себя

(Этот парень в порядке, лучше, чем последние два, он должен был видеть исходный код Vue3 более или менее)

3. Поговорим о том, как отслеживать изменения массива в vue2.x

Используя метод перехвата функций, метод массива переписывается, и Vue переписывает цепочку прототипов массива в данных, чтобы указать на метод прототипа массива, определенный им самим. Таким образом, при вызове массива API можно получить уведомление об обновлении зависимостей. Если массив содержит ссылочные типы, ссылочные типы в массиве будут снова рекурсивно проходиться для мониторинга. Таким образом реализуется мониторинг изменений массива.

(Интервьюеры, которые могут задать этот вопрос, больше сосредоточены на глубине, и об этих рутинных операциях следует помнить.)

(Подробности цепочки прототипов можно найти в другой моей колонке)

Эта статья поможет вам полностью понять цепочку прототипов JavaScript.

4. Знает ли nextTick, каков принцип реализации?

Выполняет отложенный обратный вызов после завершения следующего цикла обновления DOM. nextTick в основном использует макро-задачи и микро-задачи. В зависимости от среды выполнения попробуйте принять

• Promise
• MutationObserver
• setImmediate
• Если ничего из вышеперечисленного не работает, используйте setTimeout

Определен асинхронный метод, и многократный вызов nextTick сохранит метод в очереди и очистит текущую очередь с помощью этого асинхронного метода.

(Макрозадачи, микрозадачи и циклы событий см. в двух других моих столбцах)

(Посмотрите это, вы обнаружите, что на самом деле попросите фреймворк в конечном итоге проверить свои собственные навыки JavaScript)

Цикл событий JavaScript в браузере

Цикл событий Node.js

5. Расскажите о жизненном цикле Vue

beforeCreateЭто первый хук, срабатывающий после new Vue (). На текущем этапе данные и методы для данных, методы, вычисляемые и наблюдаемые недоступны.

createdПроисходит после того, как экземпляр создан, наблюдение данных завершено на текущем этапе, то есть данные можно использовать и изменять, и изменение данных здесь не приведет к запуску обновленной функции. Вы можете сделать начальный сбор данных. Вы не можете взаимодействовать с Домом на текущем этапе. Если вам нужно, вы можете получить доступ к Дому через vm.$nextTick.

beforeMountПроисходит перед монтированием, до того, как шаблон шаблона был импортирован в компиляцию функции рендеринга. На данном этапе виртуальный Дом создан и вот-вот начнется рендеринг. В этот момент также можно вносить изменения в данные, не запуская обновление.

mountedПроисходит после завершения монтирования, на данном этапе монтируется настоящий Дом, данные привязываются в обе стороны, к узлу Дом можно получить доступ, для работы с Домом используется атрибут $refs.

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

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

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

destroyedПроисходит после уничтожения экземпляра, и в это время остается только оболочка dom. Компоненты были разобраны, привязки данных разобраны, слушатели удалены, а дочерние экземпляры уничтожены.

(Если вас интересует подробное объяснение жизненного цикла Vue, перейдите в другую мою колонку)

Интерпретируйте жизненный цикл Vue из исходного кода, позвольте интервьюеру произвести на вас впечатление

6. В какой жизненный цикл обычно помещается ваш запрос на интерфейс?

Запросы интерфейса обычно помещаются вmounted, но следует отметить, что сервер не поддерживает монтирование при рендеринге, его нужно ставить вcreatedсередина.

7. Давайте поговорим о вычислениях и просмотре

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

WatchКеширования нет, это скорее функция наблюдения, которая может отслеживать определенные данные для выполнения обратных вызовов. Когда нам нужно глубоко следить за свойствами объекта, мы можем открытьdeep：trueвариант, который будет прослушивать каждый элемент в объекте. Это приведет к проблемам с производительностью, если вы оптимизируете его, вы можете использовать字符串形式Слушай, если не написано в компоненте, не забудь использоватьunWatch手动注销Ой.

8. Расскажите о разнице между v-if и v-show

Когда условие не выполняется,v-ifэлементы DOM не отображаются,v-showОперация представляет собой стиль (отображение), переключение отображения и скрытие текущего DOM.

9. Почему данные в компоненте — это функция?

Если компонент используется повторно несколько раз, будет создано несколько экземпляров. По сути,这些实例用的都是同一个构造函数. Если данные являются объектом, объект является ссылочным типом и влияет на все экземпляры. Таким образом, чтобы гарантировать, что данные не конфликтуют между разными экземплярами компонента, данные должны быть функцией.

10. Расскажите о принципе v-модели

v-modelСущность представляет собой синтаксический сахар, который можно рассматривать какvalue + inputСинтаксический сахар для методов. через атрибут моделиpropа такжеeventсвойства для настройки. Собственная v-модель будет генерировать разные события и атрибуты в соответствии с разными тегами.

11. Расскажите о принципе привязки событий Vue

Собственная привязка событий выполняется черезaddEventListenerПривязка к реальным элементам, привязки событий компонентов настраиваются через Vue$onосуществленный.

❝

Интервьюер: (С основами у этого ребенка все в порядке, тогда мне нужно перейти к сложности)

❞

12. Знаете ли вы принцип компиляции шаблона Vue, можете вкратце рассказать о нем?

Проще говоря, процесс компиляции Vue заключается в следующем:templateпревратиться вrenderфункциональный процесс. Он будет проходить следующие этапы:

• Сгенерировать AST-дерево
• оптимизация
• codegen

Сначала разберите шаблон, сгенерируйтеAST语法树(форма объекта JavaScript, описывающая весь шаблон). Используйте большое количество регулярных выражений для разбора шаблона и запускайте соответствующие хуки для связанной обработки при обнаружении тегов и текстов.

Данные Vue адаптивны, но не все данные в шаблоне адаптивны. Некоторые данные не изменятся после первого рендеринга, и соответствующий DOM не изменится. Затем процесс оптимизации заключается в глубоком обходе дерева AST и маркировке узлов дерева в соответствии с соответствующими условиями. Эти отмеченные узлы (статические узлы) мы можем跳过对它们的比对, что значительно оптимизирует шаблон времени выполнения.

Последний шаг компиляции将优化后的AST树转换为可执行的代码.

❝

Интервьюер: (Духовный мальчик, есть что-то, сложность возрастет, если ты не веришь, тебе будет не сложно)

❞

13. Давайте поговорим об алгоритмах diff рендереров Vue2.x и Vue3.x соответственно.

Проще говоря, алгоритм diff имеет следующий процесс

• Сравните на том же уровне, а затем сравните дочерние узлы
• Сначала определите, есть ли у одной стороны дочерние узлы, а у другой нет дочерних узлов (если у новых дочерних узлов нет дочерних узлов, удалите старые дочерние узлы).
• Сравните случаи с дочерними узлами (базовый diff)
• Рекурсивно сравнить дочерние узлы

Временная сложность обычных Diff-деревьев равнаO(n^3), но на практике мы редко делаем跨层级的移动DOM, поэтому Vue оптимизирует отличие отO(n^3) -> O(n), только когда старый и новый дочерние узлы являются несколькими дочерними узлами, для сравнения одного уровня необходимо использовать базовый алгоритм Diff.

Основной алгоритм Diff Vue2 принимает双端比较В то же время сравните два конца старого и нового дочерних элементов, найдите повторно используемый узел с помощью значения ключа, а затем выполните связанные операции. По сравнению с алгоритмом React Diff, в том же случае он может уменьшить количество движущихся узлов, уменьшить ненужные потери производительности и быть более элегантным.

Vue3.x используетiviалгоритм иinfernoалгоритм

Определите тип VNode при его создании иmount/patchв процессе принятия位运算Чтобы судить о типе VNode, и на этом основании с основным алгоритмом Diff производительность улучшается по сравнению с Vue2.x. (Фактическую реализацию можно увидеть в сочетании с исходным кодом Vue3.x.)

Алгоритм также использует动态规划Идея решения самой длинной рекурсивной подпоследовательности.

(Увидев это, вы также обнаружите, что очарование структур данных и алгоритмов повсюду во фреймворке)

❝

Интервьюер: (Да-да, вроде рассада, но самопредставление действительно скучно, следующий вопрос)

❞

(базовое упражнение, не 6)

14. Поговорим о роли виртуального дома и ключевых атрибутах

Так как манипулировать DOM в браузере дорого. Частые манипуляции с DOM вызовут определенные проблемы с производительностью. Это виртуальный дом产生原因.

Виртуальный DOM Vue2 основан на библиотеках с открытым исходным кодом.snabbdomреализация.

Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(То есть класс VNode в исходном коде, определенный в src/core/vdom/vnode.js.)

Сопоставление VirtualDOM с реальным DOM должно пройти этапы создания, сравнения и исправления VNode.

"Роль ключа заключается в максимально возможном повторном использовании элементов DOM."

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

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

15. Вы понимаете, что такое keep-alive?

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

Два часто используемых свойстваinclude/exclude, что позволяет условно кэшировать компоненты.

два жизненных циклаactivated/deactivated, используется, чтобы узнать, активен ли текущий компонент.

Также используется для поддержания активностиLRU(Least Recently Used)алгоритм.

(Это снова структура данных и алгоритм, исходный алгоритм также имеет так много приложений во внешнем интерфейсе)

16. Расскажите о последовательности вызовов жизненного цикла компонента в Vue.

Порядок, в котором вызываются компоненты,先父后子, порядок завершения рендеринга先子后父.

Операция уничтожения компонента先父后子, порядок, в котором завершается разрушение,先子后父.

Загрузить процесс рендеринга

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

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

父beforeUpdate->子beforeUpdate->子updated->父updated

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

父 beforeUpdate -> 父 updated

процесс разрушения

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

17.Каковы методы взаимодействия компонентов Vue2.x?

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

  родитель -> ребенокprops, ребенок -> родитель$on、$emit

  Получить экземпляр родительского и дочернего компонентов$parent、$children

  RefСпособ получения экземпляра вызывает свойство или метод компонента

  Provide、injectОфициально не рекомендуется, но обычно используется при написании библиотек компонентов.

• Взаимодействие компонентов родственного компонента

  Event BusРеализовать межкомпонентную коммуникациюVue.prototype.$bus = new Vue

  Vuex

• Взаимодействие компонентов между уровнями

  Vuex

  $attrs、$listeners

  Provide、inject

18. Понимает ли ССР?

SSR — это рендеринг на стороне сервера.也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端.

SSR имеет преимущества лучшего SEO и более быстрой загрузки в верхней части страницы. Однако у него также есть некоторые недостатки, такие как наши условия разработки будут ограничены, а рендеринг на стороне сервера поддерживает толькоbeforeCreateа такжеcreatedДва хука требуют специальной обработки, когда нам нужны некоторые внешние библиотеки расширений, а приложение рендеринга на стороне сервера также должно находиться в среде выполнения Node.js. Кроме того, сервер будет иметь большую потребность в нагрузке.

19. Какие оптимизации производительности Vue вы сделали?

этап кодирования

• Минимизируйте данные в данных, данные в данных добавят геттеры и сеттеры, а соответствующие наблюдатели будут собраны
• v-if и v-for нельзя использовать вместе
• Если вам нужно использовать v-for для привязки событий к каждому элементу, используйте делегаты событий
• Страницы SPA используют компоненты кэша поддержки активности.
• В большинстве случаев используйте v-if вместо v-show
• Ключ гарантированно будет уникальным
• Ленивая загрузка, асинхронные компоненты с использованием маршрутизации
• Защита от сотрясений, дросселирование
• Импорт сторонних модулей по запросу
• Прокрутите длинный список до области просмотра для динамической загрузки
• Ленивая загрузка изображения

SEO-оптимизация

• предварительный рендеринг
• Рендеринг на стороне сервера SSR

Оптимизация упаковки

• сжатый код
• Tree Shaking/Scope Hoisting
• Загружать сторонние модули с помощью cdn
• Многопоточная упаковка happypack
• splitChunks извлекает общедоступные файлы
• оптимизация исходной карты

Пользовательский опыт

• Скелетонный экран
• PWA

Вы также можете использовать оптимизацию кеша (кэш на стороне клиента, кеш на стороне сервера) и включить сжатие gzip на стороне сервера.

(Оптимизация — это большой проект, и он будет включать в себя множество аспектов. Заявка на отдельную колонку здесь)

20. Поговорим о принципе реализации хеш-маршрутизации и маршрутизации по истории

location.hashЗначение фактически находится в URL#что-то позади.

История на самом деле реализована с использованием API, предоставленного в HTML5, в основном включаяhistory.pushState()а такжеhistory.replaceState().

Интервьюер взял стоявший рядом с ним холодный кофе и сделал глоток.

(Разве я не могу спросить этого ребенка?)

"Постоянно обновляется……"

❤️Любовное тройное комбо

1. Когда вы увидите это, пожалуйста, поставьте лайк и поддержите это, ваше"отличный"Это то, что побуждает меня творить.

2. Подпишитесь на официальный аккаунт前端食堂,"Ваша передняя столовая, не забывайте есть вовремя"!

3. github.com/Geekhyt, спасибо Стар.