13 обязательных вопросов на собеседовании по Vue

Эта статья была впервые опубликована в паблике WeChat «Интервьюер программиста».

предисловие

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

Модификаторы, обычно используемые в vue?
Каковы наиболее часто используемые команды npm для проектов vue-cli?
Роль компонента поддержки активности в vue?

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

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

Как вы понимаете MVVM?

Что такое МВВМ?

Шаблон MVVM, как следует из названия, представляет собой шаблон Model-View-ViewModel. Он вырос из платформы пользовательского интерфейса WPF для Windows, запущенной Microsoft в 2005 году, а самая ранняя версия фреймворка MVVM была выпущена в 2010 году.

Уровень модели: соответствует модели предметной области уровня данных, которая в основном синхронизирует модель предметной области. Синхронизируйте клиентские и серверные бизнес-модели с помощью таких API, как Ajax/fetch. В отношениях между слоями он в основном используется для абстрагирования модели представления в ViewModel.

Уровень представления: существует как шаблон представления.В MVVM все представление является динамическим шаблоном. Помимо определения структуры и макета, он отображает данные и состояние слоя ViewModel. Уровень представления не отвечает за обработку состояния, то, что делает слой представления, — это объявление привязки данных, объявление инструкций и объявление привязки события.

Уровень ViewModel: раскрывает данные уровня, требуемые представлением, и несет ответственность за объявление привязки данных, объявление инструкций и объявление привязки событий уровня представления, то есть для работы с конкретной бизнес-логикой уровня представления. Нижний слой ViewModel будет отслеживать свойства привязки. Когда данные в ViewModel изменяются, уровень представления будет обновляться, а когда в представлении объявлена двусторонняя привязка данных (обычно элементов формы), фреймворк также будет прослушивать изменения в слое представления (форме). ценность. Как только значение изменится, данные в ViewModel, связанные со слоем View, также будут автоматически обновлены.

Преимущества и недостатки MVVM?

преимущество:

Разделите представление и модель, уменьшите связывание кода и улучшите повторное использование представления или логики: например, представление можно изменять и модифицировать независимо от модели, а модель представления можно привязать к различным «представлениям». Модель нельзя изменить при изменении, и представление также может быть изменено при изменении модели. Вы можете поместить некоторую логику представления в ViewModel и позволить многим представлениям повторно использовать эту логику представления.
Улучшение тестируемости: наличие ViewModel может помочь разработчикам лучше писать тестовый код.
Автоматически обновлять DOM: с помощью двусторонней привязки представление автоматически обновляется после обновления данных, освобождая разработчиков от утомительного ручного DOM.

недостаток:

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

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

Что такое жизненный цикл

Экземпляр Vue имеет полный жизненный цикл, то есть серию процессов от запуска до создания, инициализации данных, компиляции шаблонов, монтирования Dom -> рендеринга, обновления -> рендеринга, выгрузки и т. д. Мы называем это жизненным циклом Vue. .

Роль каждого жизненного цикла

жизненный цикл	описывать
beforeCreate	Когда экземпляр компонента создается, прежде чем свойства компонента вступят в силу
created	Экземпляр компонента был полностью создан и свойства привязаны, но реальный DOM не был сгенерирован,`$el`пока недоступно
beforeMount	Вызывается перед началом монтирования: связанная функция рендеринга вызывается в первый раз.
mounted	el заменяется вновь созданным vm.$el, а хук вызывается после его монтирования на экземпляре
beforeUpdate	Вызывается перед обновлением данных компонента, перед исправлением виртуального DOM.
update	После обновления данных компонента
activited	Эксклюзивная функция Keep-alive, вызываемая при активации компонента.
deadctivated	Эксклюзивная функция Keep-alive, вызываемая при уничтожении компонента.
beforeDestory	Вызывается перед уничтожением компонента
destoryed	Вызывается после уничтожения компонента

Диаграмма жизненного цикла

В каком жизненном цикле следует вызывать асинхронный запрос?

Асинхронный запрос официального экземпляра вызывается в смонтированном жизненном цикле, и его реально можно вызвать в созданном жизненном цикле.

Как взаимодействуют компоненты Vue?

Компоненты Vue взаимодействуют следующим образом:

props/$emit+v-on: передача данных сверху вниз через пропсы и передача информации вверх через $emit и v-on.
EventBus: публикация и подписка на информацию через EventBus
vuex: это глобальная библиотека управления данными, которая может управлять глобальным потоком данных через vuex.
$attrs/$listeners: добавлено в Vue2.4.$attrs/$listenersВозможна межуровневая связь компонентов
обеспечить/внедрить: чтобы компонент-предок мог внедрять зависимость во всех своих потомков, независимо от того, насколько глубоким является уровень компонента, и это всегда будет вступать в силу, когда устанавливаются восходящие и нисходящие отношения, что становится основой для кросс-компонентного коммуникация

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

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

computed:

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

watch:

Больше роли «наблюдения», похожего на обратный вызов мониторинга некоторых данных, используемых для наблюдения.props $emitИли значение этого компонента, при изменении данных выполняется callback для последующих операций
Без кэширования, значение будет выполнено при повторном рендеринге страницы без изменения

резюме:

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

Как Vue реализует двустороннюю привязку?

использоватьObject.definePropertyПерехватив аксессор объекта, при изменении значения свойства мы можем получить изменение, а затем сделать последующий ответ в соответствии с изменением и выполнить аналогичные операции через прокси-объект Proxy в vue3.0.

// 这是将要被劫持的对象
const data = {
  name: '',
};

function say(name) {
  if (name === '古天乐') {
    console.log('给大家推荐一款超好玩的游戏');
  } else if (name === '渣渣辉') {
    console.log('戏我演过很多,可游戏我只玩贪玩懒月');
  } else {
    console.log('来做我的兄弟');
  }
}

// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(function(key) {
  Object.defineProperty(data, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      console.log('get');
    },
    set: function(newVal) {
      // 当属性值发生变化时我们可以进行额外操作
      console.log(`大家好,我系${newVal}`);
      say(newVal);
    },
  });
});

data.name = '渣渣辉';
//大家好,我系渣渣辉
//戏我演过很多,可游戏我只玩贪玩懒月

Подробную реализацию см.Сравнение плюсов и минусов Proxy по сравнению с defineproperty?

Сравнение плюсов и минусов Proxy и Object.defineProperty?

Преимущества прокси заключаются в следующем:

Прокси может напрямую слушать объекты, а не свойства
Прокси может напрямую отслеживать изменения в массиве
Proxy имеет целых 13 методов перехвата, не ограничиваясь apply, ownKeys, deleteProperty, has и т.д.Object.definePropertyнедоступно
Прокси возвращает новый объект, мы можем использовать новый объект только для достижения цели, иObject.definePropertyВы можете только перемещаться по свойствам объекта и изменять их напрямую
В качестве нового стандарта Proxy будет подвергаться постоянной оптимизации производительности производителями браузеров, что является бонусом производительности легендарного нового стандарта.

Преимущества Object.defineProperty заключаются в следующем:

Хорошая совместимость, поддержка IE9

Подробную реализацию см.Сравнение плюсов и минусов Proxy по сравнению с defineproperty?

Как вы понимаете систему реактивности Vue?

Краткое описание адаптивной системы:

Любой компонент Vue имеет соответствующий экземпляр Watcher.
К свойствам данных Vue будут добавлены геттеры и сеттеры.
Когда функция рендеринга Vue Component будет выполнена, данные будут затронуты, то есть прочитаны, будет вызван метод геттера, и Vue запишет все данные, от которых зависит этот компонент Vue. (Этот процесс называется сбором зависимостей)
Когда данные изменяются (в основном в результате действий пользователя), то есть они записываются, и будет вызываться метод установки, В это время Vue уведомит все компоненты, которые зависят от этих данных, чтобы они вызывали свою функцию рендеринга для обновления.

Каковы плюсы и минусы виртуального DOM?

преимущество:

Гарантированный нижний предел производительности: виртуальный DOM может найти минимальную разницу с помощью diff, а затем патчить в пакетах.Хотя эта операция не так хороша, как ручная оптимизация, она имеет гораздо лучшую производительность, чем грубая операция DOM, поэтому виртуальный DOM может гарантировать более низкую производительность. предел.
Нет необходимости вручную манипулировать DOM: сравнение и исправление виртуального DOM автоматически выполняются в одном обновлении, нам не нужно вручную манипулировать DOM, что значительно повышает эффективность разработки.
Кроссплатформенность: виртуальный DOM, по сути, является объектом JavaScript, а DOM тесно связан с платформой.Напротив, виртуальный DOM может выполнять более удобные кроссплатформенные операции, такие как серверный рендеринг, мобильная разработка и т. д.

недостаток:

Невозможно выполнить экстремальную оптимизацию: в некоторых приложениях с чрезвычайно высокими требованиями к производительности виртуальный DOM не может выполнять целевую экстремальную оптимизацию.Например, VScode использует прямую ручную манипуляцию с DOM для экстремальной оптимизации производительности.

Как работает виртуальный DOM?

Виртуальный DOM — это, по сути, объект JavaScript, абстракция реального DOM.
Когда состояние изменится, запишите разницу между новым деревом и старым деревом.
Наконец, обновите разницу до настоящего дома

Подробную реализацию см.Принцип виртуального DOM?

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

Тестовый сайт: принцип обнаружения изменений Vue

Предварительные требования: коллекция зависимостей, виртуальный DOM, реактивные системы.

В современных интерфейсных фреймворках есть два способа обнаружения изменений: один — по запросу, а другой — по запросу.

pull: что означает React, мы можем вспомнить, как React обнаруживает изменения, мы обычно используемsetStateAPI явно обновляется, а затем React будет выполнять послойную операцию Virtual Dom Diff, чтобы найти разницу, а затем Patch to the DOM. React не знает, что изменилось с самого начала, а только знает, что " произошло изменение», а затем выполните более сильную операцию Diff, чтобы найти «что изменилось», другим представителем является операция «грязной проверки» Angular.

push: отзывчивая система Vue является представителем push. Когда программа Vue инициализируется, она будет собирать зависимости данных. Как только данные изменятся, отзывчивая система узнает об этом немедленно, поэтому Vue первым знает, «где изменилось», но это вызовет еще одну проблему.Если вы знакомы с отзывчивой системой Vue, вы знаете, что обычно Watcher необходим для привязки данных, но наша привязка слишком тонкая Будет сгенерировано большое количество Watcher, что приведет к накладные расходы памяти и отслеживание зависимостей, и если уровень детализации слишком низкий, он не сможет точно обнаруживать изменения.Поэтому дизайн Vue заключается в выборе средне-мелкой схемы для выполнения обнаружения нажатия на компоненте уровень., то есть отзывчивая система.Обычно мы обнаруживаем измененный компонент в первый раз, а затем выполняем Virtual Dom Diff внутри компонента, чтобы получить более конкретные различия, в то время как Virtual Dom Diff — это операция извлечения, а Vue является операцией push Обнаружение изменений выполняется в сочетании с +pull.

Почему у Vue нет жизненного цикла, похожего на shouldComponentUpdate в React?

Тестовый сайт: принцип обнаружения изменений Vue

Предварительные требования: коллекция зависимостей, виртуальный DOM, реактивные системы.

Основная причина в том, что методы обнаружения изменений Vue и React различаются.

React обнаруживает изменения в способе извлечения. Когда React узнает, что произошли изменения, он будет использовать Virtual Dom Diff для обнаружения различий, но многие компоненты точно не изменятся. В настоящее время вам нужно использовать shouldComponentUpdate для ручных операций, чтобы уменьшить различия , Это улучшает общую производительность программы.

Vue обнаруживает изменения в способе pull+push, он знает, что компонент изменился с самого начала, поэтому нет необходимости вручную контролировать diff на этапе push, а метод diff, используемый внутри компонента, действительно может внести нечто подобное Связанный жизненный цикл, но обычно компоненты разумного размера не будут иметь чрезмерных различий, а значение ручной оптимизации ограничено, поэтому Vue в настоящее время не рассматривает введение shouldComponentUpdate как оптимизированный вручную жизненный цикл.

Для чего используются ключи в Vue?

keyэто уникальный идентификатор, отмеченный для vnode в Vue, с помощью этого ключа наша операция сравнения может быть более точной и быстрой.

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

Процесс сравнения можно обобщить следующим образом: oldCh и newCh имеют по две головные и конечные переменные StartIdx и EndIdx, и их две переменные сравниваются друг с другом, и всего существует 4 метода сравнения. Если четыре сравнения не совпадают, если ключ установлен, ключ будет использоваться для сравнения.Во время сравнения переменная будет перемещаться в середину.Как только StartIdx>EndIdx указывает, что хотя бы один из oldCh и newCh был пройден , он закончится.Четыре метода сравнения: голова, хвост, старый хвост и новая голова, старая голова и новый хвост.

Точно: если не добавленоkey, тогда Vue выберет повторное использование узла (стратегия обновления Vue на месте), что приведет к сохранению состояния предыдущего узла, что вызовет серию ошибок.
Быстро: уникальность ключа может быть полностью использована структурой данных Map.По сравнению с временной сложностью обходного поиска O (n), временная сложность Map составляет всего O (1).