Горячее лицо с ответами

предисловие

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

Что подготовить перед собеседованием?

Честно говоря, я не рассматривал прежде, когда я взял интервью у этой компании! Первая сторона утром, вторая сторона была уведомлена днем, почти голая (конечно процесс тоже был очень убогий).

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

1. 刷面经Взгляните на недавние писания лиц, чтобы понять, с какими типами вопросов сейчас сталкивается компания, подготовьте несколько общих вопросов и запомните их самостоятельно.
2. 项目Проект, который вы пишете в своем резюме, должен быть достаточно понятен, от технической архитектуры до исходного кода, по крайней мере, чтобы интервьюер не спрашивал его во время собеседования.
3. 亮点Подготовьте некоторые свои основные моменты, потому что вы не можете ответить на каждый вопрос в интервью, но вы должны иметь основные моменты в процессе интервью, иначе на некоторые заданные вам вопросы будут даны ответы в целом, так что интервьюер не будет чувствовать себя У вас это хорошо получается (обратную связь получите, интервьюер говорит, что вы в порядке, но вы не сдали), можете подготовить несколько пунктов, и каждый пункт гарантированно дует на полчаса. Кроме того, вы должны понимать очень глубоко, и вы должны быть в состоянии выразить это бегло!
4. 练手Сначала найдите несколько компаний, в которые вы не хотите идти (похожие по размеру, но далеко от того места, где вы живете и т. д.), чтобы попрактиковаться в своих навыках. очень высоко. Специально для стажеров, которые еще не прошли собеседование, рекомендуется познакомиться с несколькими компаниями, а затем подумать, в какую из них пойти.Я видел слишком много друзей вокруг себя, которые горят желанием найти работу после окончания учебы и просто отправляют свои резюме. пройдя собеседование, их берут на работу. Чжоу сказал, что не хочет идти, поэтому убежал и снова искал ее. В данном случае выигрыш не стоил потери, и требовалось время, чтобы найти работу, которая он хотел.
5. 心态В конце концов, это ваш менталитет, что очень важно! ! ! Собеседование очень обычное, оно не доказывает, что вы не хороши, оно просто не подходит, подведите итог собеседования и подготовьтесь к следующему разу. Как и многие вопросы, которые задавала первая компания, которую я встретил впервые, я не мог на них ответить. Начальник написал о наборе стажеров. В конце люди, которые меня брали на собеседование, задавали какие-то странные вопросы. Мне не нужно было писать страница на фронтенде, а на бэкенде тоже нет.Напишите интерфейс, и наконец сказали, что компании нужен промежуточный фронтенд.В настоящее время я могу быть только младшим фронтендом, который не соответствует требованиям компании . Я задавался вопросом о найме промежуточного звена для написания переднего плана и найме стажеров? ? ? Все интервью заняло менее 10 минут, и я был готов взорваться. Это также повлияет на собеседование позже, поэтому у вас должно быть хорошее отношение к результатам собеседования.

Вопросы на собеседовании, которые нужно запомнить

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

vue связанные

1. Давайте поговорим о жизненном цикле экземпляров Vue: существует ли настоящий DOM на этапе монтирования?

VueПроцесс экземпляра от создания до уничтожения является жизненным циклом.

То есть: начать создавать -> инициализировать данные -> скомпилировать шаблон -> монтироватьdom-> обновление данных повторно отображает манекенdom-> Уничтожить наконец. Эта серия процессов является жизненным циклом Vue. Таким образом, настоящий DOM уже существует в смонтированной фазе.

• beforeCreate: смонтировать элемент el и объект данных экземпляра vuedataеще не были инициализированы, все ещеundefinedгосударство
• создано: объект данных экземпляра vue в это времяdataУже там вы можете получить доступ к данным и методам в нем,elЕще не установлен и не установленdom
• beforeMount: элемент экземпляра vue здесьelи объекты данных есть, но они все еще виртуальны до того, как они смонтированы.domузел
• Mounted: экземпляр vue был смонтирован на реальномdom, это можно сделать поdomоперация, чтобы получитьdomузел
• beforeUpdate: вызывается при обновлении данных ответа, происходит в виртуальномdomПеред исправлением, подходит для доступа к существующему до обновленияdom, например вручную удалить добавленный прослушиватель событий
• обновлено: виртуальныйdomВызывается после повторного рендеринга и исправления для создания новогоdomОн был обновлен, чтобы избежать манипулирования данными в этой функции ловушки, чтобы предотвратить бесконечные циклы.
• beforeDestory: экземпляр vue вызывается перед его уничтожением, его также можно использовать здесь,thisВы также можете получить доступ к экземпляру, где вы можете очистить некоторые неиспользуемые таймеры и отменить привязку событий.
• уничтожено: вызывается после уничтожения экземпляра vue.После вызова все прослушиватели событий будут удалены, а все дочерние экземпляры будут уничтожены.

официальный значок

2. Сколько способов связи есть в Vue? Каким образом вы решаете коммуникацию межпоколенческих компонентов?

Всего есть 7 видов, и в то время были даны ответы только на 4 вида.

• props/$emit для связи между родительскими и дочерними компонентами
• ссылка сдочерние элементы подходят для связи компонентов родитель-потомок
• EventBus (шина событий) подходит для связи родителей и детей, между поколениями и родственными компонентами.
• слушатели для межпоколенческой компонентной коммуникации
• обеспечить/внедрить подходит для межпоколенческой связи компонентов
• vuex подходит для связи между родителем и ребенком, между поколениями и родственными компонентами.
• щелевой щелевой метод

обратитесь к этой статье

3. Каковы общие директивы в Vue? ?

v-text/v-html/v-for/v-show/v-if/v-else/v-cloak/v-bind/v-on/v-model/v-slot...

Инструкции Vue еще надо запомнить.Здесь расположены по моему методу запоминания.У каждого может быть свой метод запоминания.

Обратитесь к документации vue.

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

v-show — переключение css, v-if — полное уничтожение и воссоздание, если v-show используется для частого переключения, v-if используется для меньшего количества изменений во время выполнения

5. Расскажите о своем понимании vuex?

Vuex — это режим управления состоянием, специально разработанный для vue.js.Ядром каждого приложения vuex является хранилище (склад). Магазин — это в основном контейнер, который содержит большую часть состояния в вашем приложении.

• vuexХранилище состояний реактивно, когдаvueПри чтении состояния в хранилище в компоненте, еслиstoreЕсли состояние на сервере изменится, соответствующий компонент будет соответственно эффективно обновлен.
• ИзменятьstoreЕдинственный способ показать статус вcommit(Отправить)mutation, чтобы мы могли легко отслеживать изменения каждого состояния.

В основном это следующие модули:

• Состояние: определяет структуру данных состояния приложения, здесь вы можете установить начальное состояние по умолчанию.
• Getter: Разрешить компоненты изStroeполучить данные изmapGettersВспомогательная функция — это простоstoreсерединаgetterСопоставляется с вычисляемыми свойствами.
• Мутация: уникальное изменениеstoreметод в состоянии и должен быть синхронной функцией.
• Действие: для фиксацииmuatation, вместо прямого изменения состояния может содержать произвольные асинхронные операции.
• Модуль: позволяет одинstoreразделить на несколькоsotreи при этом хранится в едином дереве состояний

6. в вексеstateБудут ли сохраненные данные существовать, если страница будет обновлена?

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

адрес проекта:Торговый центр с высокой имитацией проса,гитхаб-адресЗаинтересованные друзья могут клонировать и учиться. Если вы чувствуете себя хорошо, вы можете нажать «Пуск».

В этом проекте я использовал vuex для управления именем пользователя и количеством корзин.В то время моя идея заключалась в том, чтобы пользователи могли получить доступ к домашней странице, даже если они не вошли в систему. , пользователь будет перенаправлен на страницу входа, поэтому возникает такая вещь, как проблема, когда пользователь входит в систему, я использую vuex для хранения имени пользователя и количества корзин.Когда пользователь переходит на другие страницы и затем возвращается на домашнюю страницу, на этот раз в vuexstateВ имени пользователя нет данных и количество корзин пусто, решение на тот момент в app.vuemountedЭтот хук определяет, вошел ли пользователь в систему по тому, хранится ли идентификатор пользователя в файле cookie, и, если он вошел в систему, повторно отправляет запрос, а затем передаетdispatchкурокactionпредставитьmutationметод восстановления имени пользователя и количества корзины доstateсередина

7. Разница между v-bind и v-model, вы знаете принцип v-model?

• v-bind используется для привязки данных, свойств и выражений.
• v-model используется в формах для реализации двусторонней привязки данных и не может использоваться вне элементов формы.

Принцип v-модели: мы в основном используем инструкции v-модели в проекте vue для создания двусторонней привязки данных к элементам формы, таким как ввод формы, текстовая область, выбор и т. д. v-модель по сути является синтаксическим сахаром vue, а v -model внутренне использует разные свойства и выдает разные события для разных элементов ввода:

• textиtextareaЭлементы используют атрибут value и событие ввода
• checkboxиradioиспользоватьcheckedСвойства и события изменения
• slectполе будетvalueв видеpropи изменить событие действия

"взять каштан"

<input v-model="something">
本质上相当于这样
<input v-bind:value="something" v-on:input="something = $event.target.value">
其实就是通过绑定一个something属性，通过监听input事件，当用户改变输入框数据的时候，
通过事件传递过来的事件对象中的target找到事件源，value属性表示事件源的值，从而实现双向数据绑定的效果

Другие реализации можно найти в статьеАнализ исходного кода v-модели (сверхдетальный)

8. В чем разница между MVC и MVVM? ?

"MVC"

• M — модель: модель — это часть приложения, используемая для обработки логики данных приложения, обычно объект модели отвечает за доступ к данным в базе данных.
• V — представление: представление — это часть приложения, которая обрабатывает отображение данных, обычно представление создается на основе данных модели.
• C — Контроллер: Контроллер — это часть приложения, которая обрабатывает взаимодействие с пользователем, обычно контроллер отвечает за чтение данных из представления, управление пользовательским вводом и отправку данных в модель.

图示

流程

• View принимает запросы взаимодействия с пользователем
• Представление перенаправляет запрос контроллеру для обработки.
• Контроллер управляет моделью для обновления и сохранения данных
• После сохранения обновления данных Модель уведомит представление об обновлении.
• Просматривайте данные об изменениях обновлений, чтобы дать пользователям обратную связь

"MVVM"

• M - модель, модель представляет собой модель данных, и бизнес-логика модификации данных и операции также может быть определена в модели.
• V — View, View представляет компонент пользовательского интерфейса, который отвечает за преобразование модели данных в пользовательский интерфейс и его отображение.
• VM — ViewModel, ViewModel отслеживает изменения в данных модели, управляет поведением представления и обрабатывает взаимодействие с пользователем.Простое понимание — это объект, который синхронизирует представление и модель, соединяя модель и представление.

图示

流程

• Представление получает запросы взаимодействия с пользователем
• View перенаправляет запрос в ViewModel
• Операция ViewModel Обновление данных модели
• После того, как модель обновила данные, уведомите ViewModel об изменении данных.
• Обновления ViewModel Просмотр данных

"Разница между двумя"

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

❝

Подводя итог, MVVM разработан из MVC путем добавления невизуального компонента над моделью и под представлением для сопоставления данных из модели с представлением.

❞

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

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

vue официальная документация

разное

1. Выполняли ли вы какую-либо внешнюю обработку исключений? ? Что вы наделали?

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

• Исключение ошибки кодирования в js
• исключение HTTP-запроса
• Обработка исключений промисов

На самом деле их гораздо больше, я дажеwindow.errorчтобы поймать ошибки времени выполнения, ничего не говоря

Как изящно обрабатывать внешние исключения?

2. Разница между файлами cookie, SessionStroage и LocalStroage.

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

• размер хранилища

Cookie4K, Stroage5M

• срок хранения

Cookie имеет ограничение по сроку действия, а Storage - нет, sessionStorage исчезает только при закрытии окна LocalStorage всегда доступен, даже когда браузер закрыт, и хранится на жестком диске. место хранения:C:\Users\你的计算机名\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb

• разная сфера

SessionStorage не является общим для разных окон браузера.Даже если это одна и та же страница, LocalStorage используется всеми окнами одного и того же источника, а файлы cookie используются всеми окнами одного источника.

В чем разница между Cookie, LocalStorage и SessionStorage?

3. Вы знаете что-нибудь о http запросах? Каковы общие коды состояния? Что такое 405?

❝

Код состояния сети HTTP (STATUS). По коду состояния можно четко отразить результат и причину текущего взаимодействия.

❞

• 200 OK успеха (самое идеальное состояние)
• 301 Moved Permanently Постоянная передача (постоянная переадресация)
• 302 Временно переехать
• 304 Не изменен кеш набора
• 400 Bad Request Ошибка параметра запроса
• 401 Несанкционированный Несанкционированный доступ
• 404 Not Found Ресурс не найден (наименее идеальный)
• 405 Method Not Allowed Метод запроса, указанный в строке запроса, не может использоваться для запроса соответствующего ресурса, но ответ должен возвращать заголовок Allow, чтобы указать список методов запроса, которые может принять текущий ресурс.
• 500 Internal Server Error Неизвестная ошибка сервера
• 503 Служба недоступна Сервер перегружен

❝

Код состояния 2xx, как правило, является ошибкой обслуживающего персонала, а код состояния 5xx, как правило, является ошибкой сотрудников бэк-офиса.Очень важно научиться видеть, в чем проблема, и это очень поможет в будущая работа.

❞

4. Кэш браузера знает?

Кэширование браузера также является механизмом кэширования HTTP. Механизм основан на идентификаторе кэша HTTP-сообщения. Существует два типа кэширования:

• Принудительно кэшировать
• Согласовать кеш

"Принудительно кэшировать"

❝

Когда браузер отправляет запрос на сервер, сервер помещает правила кэширования в HTTP-заголовок сообщения HTTP-ответа и возвращает результат запроса браузеру. который Cache -Control имеет более высокий приоритет, чем Expires.

❞

"Согласовать кеш"

❝

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

❞

Принудительный кеш имеет приоритет над согласованным кешем. Если принудительный кеш действителен, кеш используется напрямую. Если нет, используется согласованный кеш. Сервер решает, использовать ли кеш. Результат снова сохраняется в кеше браузера. ; если он вступит в силу, он вернет 304 и продолжит использовать кеш

Механизм кеширования браузера

5. Разница между родным Ajax и axios, как Ajax отправляет http-запросы?

Родной Ajax основан наXMLHttpRequestОтправляйте HTTP-запросы, а axios — это подключаемый модуль, упакованный в соответствии с Ajax, который использует Promise внутри для решения проблемы ада асинхронных обратных вызовов запросов.

Последний вопрос на самом деле задает пять шагов отправки запроса Ajax, что слишком просто, чтобы говорить о них.

6. В чем разница между запросом на получение и запросом на публикацию? ?

"GET"

• Обычно используется для получения данных
• Параметры передаются на основе URL-адреса, поэтому существует ограничение на длину (обычно около 8 КБ), если оно превышает, оно будет усечено.
• Поскольку запросы GET легко перехватываются на основе вопросительных знаков, они относительно небезопасны.
• будет генерировать неконтролируемое кэширование, POST не будет

"POST"

• Обычно используется для добавления новых данных
• Исходя из запроса на передачу параметров, теоретически ограничений нет (в реальном проекте ограничение по размеру будет установлено вами, чтобы предотвратить задержку запроса из-за загрузки информации)
• Запрос PSOT основан на теле запроса, и его перехват относительно безопасен.

7. В чем разница между http и https? ?

На ответ на этот вопрос уходит полчаса, и все отвечают в разные стороны.

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

8. Может ли серверная часть удалять файлы cookie, установленные внешним интерфейсом?

Мой ответ - нет, и я не знаю, правильно ли это, и в Baidu нет ответа. . . Кто знает, может ответить в комментариях.

9. Сколько способов существует для обычных макетов?

• Гибкая компоновка (rem/em)
• Растровый макет
• процентное расположение
• плавающий макет
• ...

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

10. В чем разница между rem и em?Скольким пикселям равен 1em?

единицы rem и em являются относительными единицами, за исключением того, что по отношению к элементу em父元素Размер шрифта рассчитывается, rem относится к根元素Размер шрифта html вычисляется.

❝

1em эквивалентно размеру шрифта родительского элемента текущего элемента

❞

举个栗子

<style>
    .box {
        font-size: 18px;
    }
    .box .children {
        width: 2rem; // 相当于2 * 18 = 36px
    }
</style>

<div class="box">
    <span class="children">里面</span>
</div>

11. Вы использовали git? Каковы общие команды? Если вы отвечаете за проект, как вы управляете своим складом?

"Общие команды"

创建版本库：
- git clone
- git init 
查看配置
git config -l // 查看全部
git conig --global -l // 查看仓库中人员名和邮箱
git config user.name xxx // 设置
git config user.email xxx // 设置
修改和提交
git status
git diff // 查看变更内容
git add .
git mv 
git rm
git commmit -m 
查看提交历史
git log 
git log <file> // 查看该文件每次提交的记录
分支操作
git branch // 查看当前分支
git checkout -b // 添加一个新分支并切换过去
远程操作
git remote -v // 查看远程分支
git remote add <remoteURL> // 添加远程分支
    
最后说了下我管理库的方式：
首先我会在gitHub上创建一个仓库，为当前项目中每位开发人员取一个对应的分支，让其在对应的分支开发。
然后clone我这个仓库。

当队员需要向gitHub上传代码时，需要先将自己的代码同步到自己远程仓库对应的分支中，
再切换到要本地的主分支将自己本地开发的分支代码进行合并，如果有冲突先在本地解决，
最后再同步到远程的主分支

вопрос сцены

1. Если на линии есть большая картинка, и ее отображение занимает много времени, как бы вы ее оптимизировали?

Я ответил только на эти два пункта в то время, и я не знаю остальных. . .

• Использование техники ленивой загрузки
• Оптимизировать размер изображения

2. Если бы вас попросили дважды динамически инкапсулировать форму в element-ui, что бы вы сделали?

Для такого рода вопросов мой ответ плохой, и я не осмеливаюсь ошибиться Я поделюсь здесь не той статьей.Компонентная страница: инкапсуляция электронной формы

3. Как решать сложные бизнес-сценарии, встречающиеся в проекте?

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

4. Какие у вас есть хорошие идеи для инкапсуляции компонентов

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

Через vue.extend, vue.component регистрация таким образом, чтобы найти общие модули проекта, указать общую часть кода, передать значение реквизита и свободно настроить контент через слот, а затем создать файл vue .

В Интернете нет хорошего ответа на этот вопрос, и большие ребята могут комментировать и обмениваться ниже.

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

Расскажу об общей идее, сначала проанализирую спрос: что нужно?

• Форма форма, таблица, пагинация
• n условные поля, кнопка запроса, кнопка сброса и другие функциональные кнопки. .

Функция, которую необходимо реализовать

• Запрос
• Запросить данные после нажатия на разбиение на страницы
• перезагрузить
• Получить данные после выбора строки
• Триггер других функций

Наконец, можно определить, что данные необходимо импортировать извне.

6. Как вы думаете, что является самой большой изюминкой вашего проекта против Xiaomi Mall? ?

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

постскриптум

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

После прочтения двух мелочей

Если вы найдете мою статью полезной, я хотел бы попросить вас сделать мне два небольших одолжения:

1. Подписывайтесь на меня"Гитхаб фейсбук", так что опыт суммирован здесь, Следуйте и начните.
2. "Обратите внимание на публичный аккаунт «Станция самообучения Front-end»", все статьи и материалы будут публиковаться в паблике впервые, и паблик аккаунт будет отвечать ""вопросы интервью"” Получите видео с моими хорошо организованными вопросами для интервью бесплатно.