Тридцать семь важных вопросов общего интервью, спина выполняет работу.

1. Расскажите о своем понимании MVVM?

Упростите отношения сопоставления и скройте контроллер MVVM скрывает уровень управления на основе MVC.

Vue — это не фреймворк MVVM, а фреймворк уровня представления.

ViewModal — это мост, который связывает данные с представлениями.

2. Расскажите о своем понимании реактивных данных в Vue?

При изменении значения массива и типа объекта передатьdefineReactiveметод, используяdefineProperty, добавив все свойстваgetterа такжеsetter. Пользователи могут выполнять некоторые операции при получении значений и их установке.

Дефект: можно отслеживать только самые внешние атрибуты.Если он многоуровневый, требуется полная рекурсия.

Сбор зависимостей будет выполнен в get (dep[watcher, watcher]) Обновление данных будет выполнено в наборе (уведомить, уведомить наблюдателя об обновлении)

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

В vue нет defineProperty для массивов, но переписано 7 методов массивов. Они есть:

• push
• shift
• pop
• splice
• unshift
• sort
• reverse

Потому что все эти методы изменяют сам массив.

Индекс и длину массива нельзя отслеживать.

4. Как собрать зависимости во Vue?

Когда Vue инициализируется, он будет скомпилирован после монтирования. Создайте функцию рендеринга.

Когда значение будет принято, наблюдатель будет собран и помещен в отл.

Когда пользователь изменяет значение, наблюдатель уведомляется об обновлении представления.

5. Как понять принцип компиляции шаблона в Vue?

Суть этой проблемы в том, как преобразовать шаблон в функцию рендеринга.

1. Преобразование модуля шаблона в учебник по грамматике ast - parserHTML
2. Пометить статическую грамматику (некоторые узлы не меняются)
3. Регенерировать код — codeGen, переносит строки, используя синтаксис with

6. Как реализованы хуки жизненного цикла Vue?

Хук жизненного цикла Vue — это функция обратного вызова, и соответствующий метод хука вызывается при создании экземпляра компонента. Ловушка обрабатывается внутри, а функция хука сохраняется в виде массива.

7. Каковы жизненные циклы компонентов Vue?

• beforeCreate вызывается после инициализации экземпляра, перед наблюдателем наблюдения за данными и событием, конфигурацией события наблюдателя
• созданный экземпляр был создан, на этом шаге завершается следующая конфигурация
  • наблюдение за данными
  • Операции над свойствами и методами
  • обратный вызов времени просмотра/события
  • $ El не был сгенерирован
• beforeMount вызывается перед монтированием, рендеринг не вызывался
• смонтированный el заменяется вновь созданным vm.$el и вызывается после его монтирования на экземпляре
• beforeUpdate вызывается при обновлении данных, прежде чем виртуальный дом будет повторно отрендерен и исправлен.
• update вызывается после повторного рендеринга виртуального дома и исправления из-за изменений данных
• beforeDestroy вызывается перед уничтожением экземпляра
• уничтожено Вызывается после уничтожения экземпляра.После вызова все в экземпляре Vue будет развязано, все прослушиватели событий будут удалены, а дочерние экземпляры будут уничтожены.Этот хук не будет вызываться во время рендеринга на стороне сервера.
• Keep-alive (активировано и деактивировано)

8. Каковы сценарии и принципы использования vue.mixin?

Функция миксина Vue заключается в извлечении общедоступной бизнес-логики.Принцип аналогичен наследованию объектов.При инициализации компонента вызывается метод mergeOptions для слияния, а режим стратегии используется для слияния разных атрибутов. Если есть конфликт между смешанными данными и данными его собственного компонента, его собственные данные имеют преимущественную силу.

Недостатки: конфликт имен, неясный источник данных.

9. Почему данные компонента Vue должны быть функцией?

new VueЭто одноэлементный режим, и в нем не будет операций слияния, поэтому корневому экземпляру не нужно проверять, должны ли данные быть функцией. Данные компонента должны быть функцией для предотвращения загрязнения данных двух компонентов. Если все они являются объектами, при слиянии они будут указывать на один и тот же адрес. А если это функция, то она будет вызываться при слиянии, и будут генерироваться два пробела.

10. Пожалуйста, объясните принцип работы nextTick.

nextTick — это микрозадача.

• Обратный вызов в nextTick — это отложенный обратный вызов, который выполняется после завершения следующего цикла обновления Dom.
• Можно использовать для получения обновленного Дома.
• Обновления данных в Vue асинхронны, использование nextTick гарантирует выполнение определяемой пользователем логики после обновления.

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

• И вычисляемые, и наблюдаемые реализованы на основе наблюдателя.
• Свойства вычисляемых кэшируются, зависимые значения не меняются, и метод вычисления свойств не будет выполняться повторно при взятии значений.
• watch должен следить за изменением значения, при изменении значения будет вызываться функция обратного вызова

12. Как реализован метод Vue.set?

• Vue добавляет атрибуты dep как к объекту, так и к самому массиву.
• Когда к объекту добавляется несуществующее свойство, наблюдатель, от которого зависит объект, запускается для обновления.
• При изменении индекса массива вызовите метод splice самого массива, чтобы обновить массив.

13. Почему Vue использует виртуальный дом?

• Виртуальный дом заключается в использовании объектов js для описания реального дома, который является абстракцией реального дома.
• Dom низкий из-за производительности прямой работы, высокой операционной эффективности, но уровень js может быть преобразован в целевую операцию Dom. Окончательное обновление алгоритма Dom diff путем сравнения разницы
• Virtual Dom не зависит от реальной платформы и может быть кроссплатформенным.

14. Каков принцип алгоритма сравнения Vue?

Алгоритм сравнения Vue представляет собой сравнение уровней и не рассматривает случай сравнения между уровнями. Внутреннее использование глубокой рекурсии + сравнение двойного указателя

• Сначала сравните, являются ли два узла одним и тем же узлом
• Сравнивайте атрибуты одного и того же узла, повторно используйте старые узлы
• Сначала сравните сыновние узлы, рассмотрите ситуацию со старым узлом и сыном нового узла.
• Сравнение оптимизаций: лицом к лицу, лицом к лицу, лицом к лицу, лицом к лицу
• Сравнивайте и ищите, повторно используйте

15. Поскольку Vue может точно обнаруживать изменения данных путем перехвата данных, зачем вам нужно выполнять diff для обнаружения различий?

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

Таким образом, алгоритм watcher + Diff используется для обнаружения разницы.

16. Пожалуйста, объясните функцию и принцип работы ключа

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

Семнадцать, поговорим о понимании компонентов

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

18. Пожалуйста, опишите процесс рендеринга компонента

Создать виртуальный узел компонента -> создать реальный узел компонента -> вставить на страницу

19. Пожалуйста, опишите процесс обновления компонентов

Обновление свойства вызовет метод patchVnode, а виртуальный узел компонента вызовет хук prepatch, затем обновит свойство и обновит компонент.

20. Принцип асинхронных компонентов

Сначала визуализируйте асинхронный узел для асинхронного заполнения -> Вызовите ForceUpdate после того, как компонент загружен, чтобы заставить обновление.

21. Преимущества и принципы функциональных компонентов

• Особенности функциональных компонентов: нет состояния, нет жизненного цикла, нет этого. Так производительность будет выше.

Обычный компонент — это класс, расширяющий Vue.

Функциональный компонент — это обычная функция.

22. Какие есть способы передачи значения компонентов?

1. реквизит и$emit: родительский компонент передает данные дочернему компоненту, которые передаются через реквизиты. Дочерний компонент передает данные родительскому компоненту через$эмитировать событие
2. $parent,$children получает родительский компонент текущего компонента и дочерний компонент текущего компонента
3. $атрибуты и$слушатели.
4. Родительский компонент предоставляется путем предоставления, а дочерний компонент вводится переменными с помощью инъекции.
5. $ref для получения экземпляра
6. Доставка данных компонентов уровня eventBus
7. Vuex

23. Какую проблему решает $attrs?

Основная функция заключается в передаче данных пакетами.

Provide/inject больше подходит для использования в плагинах, в основном для обеспечения межуровневой передачи данных.

24. Что имеет более высокий приоритет, v-for или v-if?

Во-первых, v-for и v-if не могут использоваться в одном и том же теге.

Сначала обработайте v-for, затем v-if.

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

25. Как реализован v-режим?

V-модель, используемая в компоненте, представляет собой модель и обратный вызов.

На общих элементах с V-моделью он будет генерировать инструкции, поскольку могут также быть разные элементы:

• Генерировать значение и ввод
• Генерировать изменения и радио
• Генерировать изменения и проверено

Когда будет вызвана команда?

Исходный код:

Двадцать шесть, разница между обычным слотом Vue и слотом с ограниченной областью видимости

обычный слот

Обычные слоты рендерятся после замены. После визуализации родительского компонента замените содержимое дочернего компонента.

Обработка дочерних узлов и тегов слотов в компонентах во время компиляции шаблона

При создании элемента замените содержимое _v() на метод _t().

слот с прицелом

Слоты с заданной областью действия могут обращаться к свойствам дочерних компонентов. Передать свойства в дочерние компоненты и визуализировать.

Результат компиляции для слотов с ограниченной областью действия:

28. Что делает Vue.use?

Vue.useиспользуется для использования плагинов. Мы можем расширять глобальные компоненты, директивы, методы-прототипы и т. д. в плагинах. позвонюinstallМетод передается в функцию сборки Vue по умолчанию, и vue можно использовать в плагине, не полагаясь на библиотеку vue.

29. Каковы преимущества написания имени для компонента?

• Добавление атрибута имени добавит сам компонент к атрибуту компонентов для реализации рекурсивного вызова компонента.
• Он может представлять конкретное имя компонента, что удобно для отладки и поиска соответствующего компонента.

30. Какие есть модификаторы Vue?

• .stop
• .prevent
• .capture
• .self
• .once
• .passive
• .right
• .center
• .middle
• .alt

31. Как понимать пользовательские команды?

• Когда вы создаете синтаксическое дерево AST, вы сталкиваетесь с инструкцией добавить свойство Directives к текущему элементу.
• Сгенерировать код директивы через genDirectives
• Перед установкой исправления извлеките хук инструкции в cbs и вызовите соответствующий хук в процессе исправления.
• При выполнении хука, соответствующего cbs, вызывается соответствующий метод определения инструкции.

32. Где обычно используется keep-alive? Каков принцип?

• При использовании keep-alive для переноса динамических компонентов компоненты будут кэшироваться, чтобы избежать повторного создания компонентов.

Существует два сценария использования: один — динамические компоненты, а другой — представление маршрутизатора.

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

Кэш — это экземпляр компонента, в котором хранятся объекты ключей и значений.

При загрузке следите за включением и исключением.

Если кеш не требуется, верните виртуальный узел напрямую.

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

Если установлено максимальное количество кешей, 0-й кеш удаляется. Добавьте последний кеш.

И добавить к компоненту переменную keepAlive как true, при инициализации компонента она больше не инициализируется.

33. Сколько хуков есть у vue-router? Как проходит процесс исполнения?

Есть три типа функций ловушек:

• глобальная гвардия
• охранник маршрута
• защита компонентов

Тридцать четыре, разница между двумя режимами vuerouter

• В vue-router есть три режима: хэш, история, абстрактный
• abstract используется в сменщике сцен API, который не поддерживает браузер
• Хэш-режим имеет хорошую совместимость, но некрасивый, что не способствует SEO.
• История красивая, historyAPI+popState, но появится обновление 404

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

• Уровень данных не должен быть слишком глубоким, а отзывчивые данные должны быть установлены разумно.
• При использовании данных кэшируйте результат значения и изредка берите значение
• Разумный набор ключей
• Разумное использование v-show (частое переключение и высокая производительность) и v-if
• Управляйте детализацией компонентов -> Vue использует обновления на уровне компонентов
• Используйте функциональные компоненты -> низкая стоимость функциональных компонентов
• Используйте асинхронные компоненты -> используйте стратегию субподряда webpack
• Используйте keep-alive для кэширования компонентов
• Виртуальная прокрутка, разделение времени и другие стратегии
• Оптимизация упаковки

Тридцать шесть, расскажите о своем понимании Vuex?

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

Проблема: невозможно сохранить.

• Мутация в основном изменяет состояние и выполняется синхронно
• Действие выполняет бизнес-код, удобный для повторного использования, а логика может быть асинхронной. Состояние не может быть изменено напрямую.

37. Какие шаблоны проектирования используются в vue?

• Режим Singleton: новый несколько раз, только один экземпляр

• Фабричный режим: вы можете создать экземпляр, передав параметры (создание виртуальных узлов)
• Режим публикации-подписки: eventBus
• Режим наблюдателя: наблюдайте и наблюдайте
• Режим прокси: атрибут _data, прокси, защита от сотрясений, регулирование
• Паттерн посредника: vuex
• режим стратегии
• Внешний вид Режим