Резюме моего предварительного собеседования в 2021 году (70 вопросов)

предисловие

Jin Jiuyin10, я уволился с работы по разным причинам, а затем начал искать работу.Находясь в Сямэне, я кратко рассмотрю некоторые вопросы, которые задают на собеседованиях многие компании. Многие из вопросов, которые следуют, являются повторяющимися или связанными. Я просто скажу, что отвечу на него сам. Вы должны выучить и понять конкретный ответ самостоятельно. Это ваше. Для некоторых вопросов я поставлю несколько справочных ссылок. Узнайте.

Контента много, рекомендуется ставить лайки и добавлять в избранное

Самостоятельное введение

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

Самостоятельное введение: Интервьюер, доброе утро/день, меня зовут Ван Сяоэр, я закончил определенную школу в определенном году, и сегодня я подаю заявку на должность инженера по интерфейсу в вашей компании.Я занимаюсь разработкой интерфейса более чем через три года, а затем кратко опишите ситуацию входа первой компании.Набор двух компаний. Говоря о характере и т. Д., Барабара немного более обтекаемый.

Обзор вопросов интервью

Вот несколько вопросов для интервью, которые я записал. Нет порядка сложности. Это просто обзор. Некоторые вопросы немного повторяются, вторичной фильтрации нет. Следующие вопросы на собеседовании в основном основаны на vue2, а некоторые связаны с vue3.

1. Жизненный цикл

beforeCreate => created =>beforeMount => Mounted =>beforeUpdate => updated =>beforeDestroy=> destroyed

В режиме проверки активности: активирован деактивирован

ссылка на расширение

Документация официального сайта Vue

2. Порядок жизненного цикла родитель-потомок

родитель перед созданием => родитель создан => родитель перед монтированием => Дочерний элемент перед созданием => Созданный дочерний элемент => Дочерний элемент перед монтированием => Смонтированный дочерний элемент => Смонтированный родительский элемент

Сначала монтируется дочерний компонент, а затем родительский компонент, и обновление аналогично родитель beforeUpdate => дочерний элемент beforeUpdate => обновленный дочерний элемент => обновленный родительский элемент

ссылка на расширение

Документация официального сайта Vue

3. Значение передачи родительско-дочернего компонента

vue2 в качестве примера:$emit props$ref $parent$children eventBus provide/inject vuex

ссылка на расширение

значение передачи компонента родитель-потомок

4. 8 междоменных решений

• iframe + document.domain location.hash window.name и другие три
• postMessage
• proxyTable
• промежуточное ПО nodejs
• cors
• websocket
• jsonp
• обратный прокси nginx

ссылка на расширение

Несколько решений в разных областях

5. Отличие обычных функций от стрелочных* Конструктор

• 1. Стрелочная функция не имеет прототипа, прототип не определен
• 2. Функция стрелки this указывает на глобальный объект, а функция указывает на ссылочный объект.
• 3. Методы call, apply и bind не могут изменить направление стрелочной функции.

ссылка на расширение

В чем разница между нормальной функцией и функцией стрелки?

6.reduce (использование аккумулятора, реализовать самостоятельно)

• arr.reduce(a,b)
• a — функция, b — начальное значение
• arr.reduce((a,b,c,d)=>{a — начальное значение, вычисленная сумма b — текущее значение массива c — текущий идентификатор d — весь массив })

ссылка на расширение

8 JS уменьшает количество примеров использования и сокращает операции

7. В чем разница между jq и vue*

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

• vue на основе данных
• jq управляет элементом dom
• Простой или мало элементов dom.Если сравнить два, кажется, что разница невелика.Элементов dom и операций много, и вы обнаружите, что vue более удобен и лаконичен.
• Vue выглядит элегантно, а код прост в обслуживании.

8. Разница между базовыми типами данных, ссылочными типами и базовыми типами...

строка, логическое значение, число, нуль, неопределенный, символ, bigInt

object

js-тип данных

9. Обещание и асинхронное ожидание связанных знаний es6

очки знаний es6:

• Объявления и выражения: let const деструктурирующее присваивание Symbol
• Встроенные объекты: сопоставление и установка прокси и отражение
• шаблон строки
• Функции: итераторы стрелочных функций расширения параметров для of
• класс класс
• экспортировать и импортировать модули
• обещание асинхронного ожидания и генератора

Обучение ES6 Руана Ифэна

10. Какие макрозадачи и микрозадачи (цикл событий) относятся к

• цикл событий
• очередь задач
• задача макроса
• микрозадачи

Макрозадачи и микрозадачи в js

11. Разница между vue2 и vue3 (где vue3 быстрей)

• Алгоритм diff добавляет статический флаг patchFlag и сравнивает только элементы dom со статическими флагами.
• кеш увеличения события
• Многие продвижения текстовых узлов определяются только один раз, и их не нужно определять снова при рендеринге, vue2 необходимо каждый раз переопределять.
• ssr визуализировать как строку
• прокси заменяет предыдущий defineProterty
• vite
• ts

...

12. Некоторые принципы vue2 (глубокое понимание)

nextTick, diff, виртуальный дом, часы и т. д.

Ссылка для обучения принципам vue2

13.cesium и three.js, картографический движок babylon.js и 3d-карта и т. д. (требуется индивидуально)

Знания, связанные с картой или 3D

14. Некоторое знание vuex (расширить аксиомы маршрутизатора)

state moudles getter actions moutation

официальный сайт векс

15.axios получить разницу ajax

перехватчики axios перехватчики запрос отклик

Разница между ajax и axios и выборкой

Подробное объяснение разницы между axios, fetch и ajax

16. Фильтр vue2

Функция фильтрации фильтра Vue2.x

Четыре варианта использования vue filter

17.es6 вроде промисов...

Повторяется, чтобы проиллюстрировать важность очков знаний es6

Обучение ES6 Руана Ифэна

18. Почему появляется деконструкция es6 и какую проблему она решает?

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

Обучение ES6 Руана Ифэна

19. Разница между v-if и v-show

• с рендерингом или без
• Рекомендуемые сценарии

Причина предупреждения при одновременном использовании v-for+v-if и т. д.

20. Роль ключа v-for

Флаг сравнения алгоритма Diff для ускорения сравнения

Быстро и лаконично объясните роль клавиши цикла v-for в Vue.

21. Некоторое знание алгоритма diff и виртуального дома

• создать дерево дома
• Создать таблицу стилей
• Свяжите дерево dom с таблицей стилей для создания дерева рендеринга.
• макет
• краска

Виртуальный дом - это объект js

1. Пусть виртуальный DOM и DOM-diff перестанут быть вашим камнем преткновения

2. Виртуальный дом

22. Два способа маршрутизации Routing guard

история хеширования Использование общих хуков для достижения принципа

Разница между двумя режимами vue-router

23. Реализация динамически загружаемой маршрутизации

Реализация динамически загружаемых маршрутов 1

Реализация динамически загружаемой маршрутизации 2

24. Внедрение и контроль системных разрешений (можно рассмотреть вопросы, связанные со входом в проект)

• Объединить серверную часть
• чистый интерфейс
• Как инкапсулировать
• разные роли

Как реализовать контроль разрешений системы управления фоном в vue

25. Разница между часами и компьютером

• сцены, которые будут использоваться
• вычисленный имеет кеш
• Оба являются классами vue watcher

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

26. Расскажите о трудностях, возникших в вашем собственном проекте

Объедините свои собственные проекты и, скажем, несколько, вы можете вести в том направлении, в котором вы хороши, например, оптимизация производительности, встраивание данных или инженерная практика и т. д.

27. []==false и ![]==false

• Первый []==false превращается в число 0==0
• Второй ![]==false превращает логическое значение в false==false

Подумайте о явных и неявных преобразованиях

28. Оптимизация производительности

Балабала кратко объясняет на уровне кода, сети, загрузки ресурсов, упаковки и развертывания и т. д. Можно много говорить об оптимизации производительности

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

1. 24 предложения по оптимизации производительности интерфейса (2020 г.)

2. 9 стратегий и 6 индикаторов для оптимизации производительности, написанных для среднего и продвинутого фронтенда | Четыре года практики в NetEase

3. Расскажите об оптимизации производительности внешнего интерфейса

4. Оптимизация производительности проекта Vue - практическое руководство (наиболее полное/подробное в сети)

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

Практика оптимизации белого экрана домашней страницы

29. Защита маршрутизатора и системные разрешения соответствуют 23, 24

• Инкапсуляция маршрутизации, ленивая загрузка и т. д.
• системный авторитет

30. Сходства и различия между двумя вопросами vue и react

такой же:

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

разница:

• vue используется для небольших проектов,
• Стоимость обучения Vue низкая,
• vue рендерится быстрее,

-vue имеет шаблоны, а реакция - jsx,

• vue двусторонняя привязка данных,
• реакция односторонняя,
• Vue имеет синтаксис команд,

Резюме: реакция - это все в js, а vue - это все в .vue

Личное понимание разницы между Vue и React

Некоторые сравнения и личные размышления о Vue и React (часть 1)

Некоторые сравнения и личные мысли о Vue и React)

31. Как webpcack упаковывает картинки

base64 и импорт адресов

Я автор csnd, изучаю веб-пакет

Схема сжатия изображения с оптимизацией внешнего интерфейса

32. Какие бывают типы контента

• application/json
• multipart/form-data
• raw
• binary
• plain/text
• ...

Что вы знаете о http Content-Type?

33. Какие есть методы http запроса

• get
• post
• head
• put
• delete
• connect
• trace
• options

В чем разница между GET и POST?

34.es6 принцип

То же, что №9

35. Высшие и частичные функции, каррирование

Функции, параметры которых являются функциями, являются функциями высшего порядка.

Функция возврата является частичной функцией

36. Разница между промисами асинхронного генератора заключается в асинхронном решении

• async/await — это синтаксический сахар для генератора.
• Генератор yield вызывается шаг за шагом, затем() вызывается непрерывно
• async/await возвращает объект обещания, так что вы можете написать then();

37. Как определить, поддерживает ли браузер es6

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

38. Отличие формы от json и других параметров поста

Тип содержимого

В чем разница между GET и POST?

39. Почему данные vue возвращаются функцией, а не прямым объектом

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

Почему свойство данных не может быть объектом

40.хок: жизненный цикл

this.$once('hook:beforeDestroy',()=>{ })

41: Как определить, знает ли вошедший в систему пользователь, что срок действия токена доступа к странице истек и т. д.

Это также связано с разрешениями, их легко спросить

42. Повторно проходит функция сторожа маршрута, типа beforeEach

повторяющаяся проблема

43. Какие значения атрибутов у defineProterty

• настраивается, можно ли удалять свойства и описания свойств
• enumerable может появляться только в перечислении объектов
• значение начальное значение
• Можно ли изменить запись с помощью оператора присваивания
• get
• set

ссылка на расширение

Рукописный вопрос: obj={a:0} каждый раз принимает значение атрибута a + 1

Простая реализация: добавить значение записи снаружи

44. Использование и разница между мутациями и действиями в vuex

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

официальный сайт векс

45. Принцип наблюдения наблюдателя от наблюдателя 、、、vue2

vue2 принцип обучения

(Колонка серии исходных кодов Brother Shark Vue2) [Наггетс.Талант/колонка/6961…]

46. ​​Загрузчик вебпака

use test loader exclude

Отличие от плагинов

Научите вас, как свернуть загрузчик Webpack

47. TS только для чтения?

знание ТС,

Еще не ТС? Быстрый старт с TypeScript

48. Принцип nextTick

Обратный вызов выполняется после обновления dom

Может использоваться для получения обновленного элемента dom.

Анализ исходного кода $nextTick в Vue

49.аксиос перехватчик

interceptor

Разговор об инкапсуляции аксиом во Vue

50.extends и миксины vue.use

Плагины должны быть установлены, прежде чем их можно будет использовать

Различают расширения:... и vue.extend

• Extend может импортировать только один объект, в то время как миксины могут импортировать несколько объектов в массиве.
• vue.extend()Метод на самом делеvueконструктор , унаследованный отvue
• в состоянии пройтиextentРасширение глобальных компонентов

51.vue принцип init()

beforeCreate инициализирующие события и жизненный цикл

30 вопросов интервью Vue с подробными пояснениями

52. В чем разница между глобальной регистрацией и локальной регистрацией компонентов vue

• Глобальный компонент: Vue.component()
• Частичные компоненты: компоненты:

53. Взгляните на пакет API и маршрутизатора проекта.

повторяющиеся вопросы

54. Реализация Eventbus вручную

Как реализовать EventBus самостоятельно

55. Некоторые мысли о виртуальном доме

Интервьюер спросил: Как понять виртуальный DOM?

56. Где находится vite fast?

• webpack использует ployfill для регистрации зависимостей
• vite использует ESM для регистрации зависимостей
• vite меньше по размеру пакета, vite быстрее, конфигурация vite проще

57. Разница между defineProterty и прокси

• defineProterty — данные захваченного объекта
• И прокси - это весь объект

58. Разница между реакцией и vue

повторение:

• Сходства: у всех есть виртуальный дом, у всех есть ответ ssr, все поддерживают jsx, у всех есть соответствующие библиотеки управления состоянием и маршрутизацией, все сосредоточены на своих собственных библиотеках.
• Отличие: vue двусторонняя привязка данных vue обрабатывает быстрее vue имеет меньшую стоимость обучения vue имеет больше китайских документов vue имеет шаблон, а react - jsx

59. Знания о связывании данных настройки

Ссылки по теме

60. Концепция замыканий js

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

61. Концепции, связанные с трехсторонним рукопожатием и четырехсторонней волной HTTP 1.1, добавлены общие коды состояния поддержания активности, такие как 301 302.

http http1.0 http1.1 https http2.0 и т. д. (будет улучшено)

Ссылка на обучение

62. Почему js однопоточный

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

63.h5 рабочий

• Это апи для h5
• также класс
• Новый рабочий поток добавляет новый поток, но этот поток имеет ограничения и не может работать с элементами DOM и управляется основным потоком.

64. Макро-задачи и микро-задачи eventLoop

• цикл событий
• очередь задач
• задача макроса
• микрозадачи

Макрозадачи и микрозадачи в js

(Сначала выполните макрозадачу, а затем микрозадачу)

65. Разница между пряжей pnpm и npm

Ссылка на обучение

66. Сравнение webpack и vite и общих API webpack (загрузчик и плагины)

• webpack использует polyfill для загрузки модулей
• в то время как vite использует ESM для загрузки модулей
• vite быстрее, меньше по размеру пакета, прост в настройке
• погрузчик

67. Сравнение vue3 и vue2, где vue3 быстрее

• Алгоритм сравнения добавляет статический тег, который сравнивает только отмеченные элементы DOM.
• Продвижение элемента Text dom может использоваться несколько раз, если объявлен только один рендер.
• События добавлены в кеш
• Теперь используйте прокси для получения свойств напрямую, а не перехватывайте свойства данных с помощью definePrototery, как раньше.
• использовать рендеры обновлений ssr, обрабатывать их как строки для быстрого рендеринга обновлений

ссылка на расширение

68. Кэш делится на сильный кеш и кеш согласования, который отличается от хранилища (cookie sessionStorage localStorage)

• Сильное кэширование не требует отправки запросов на сервер
• И для согласования кеша необходимо отправить запрос на получение 304

69. Принцип двусторонней привязки

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

модельные крючки (реквизит, событие)

70.MVVM

Ссылки по теме

Вопросы по алгоритму (задаются)

• обратно связанный список
• Объединить два упорядоченных списка (расширить, чтобы объединить k упорядоченных списков)

Интервью Мелочи

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

резюме интервью

Обычно на собеседовании спрашивают:

• html (менее активно, меня спрашивали, я не помню): что такое семантические теги или несемантические теги?
• css (менее активно): например, макет веса
• js: включает в себя многое, типы данных, цепочки прототипов, замыкания... некоторые из них
• Framework: вовлечение нескольких vue или react, направленных на разработку использования и принципа или некоторых дизайнерских идей.
• Оптимизация производительности: один вопрос (если у вас есть это преимущество, вы можете взять на себя инициативу, чтобы процитировать это)
• Основы работы с компьютером важны, не обязательно много вопросов
• Сервер node.js nginx и т.д.
• Разработанный ci/cd
• Алгоритмы (обязательно для крупных производителей)
• ...

Небольшие фабрики готовят js и фреймворки, а тут еще 1-2 пункта других знакомых или плюсов, без проблем

позже

Интервью-это двусторонний выбор.Общая подготовка очень важна,и состояние тоже очень важно.Например,если вас подавляет интервьюер в начале,если вы не подстраиваете его обратно,последующее интервью может быть не очень гладко. Jin Jiuyin10, я ушел в середине сентября и присоединился к ним в середине октября.После более чем месячного собеседования я дал себе удовлетворительный ответ.

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

Моей основы все еще недостаточно, и моей глубины недостаточно, что приводит к нескольким светлым пятнам и нуждается в укреплении...

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

Я хочу, чтобы xdjmm, которые меняют работу или ищут работу, могли найти идеальную работу! ! ! Xdjmm, которые не сменили работу, могут получить продвижение по службе и прибавку к зарплате, а также выйти замуж за Бай Фумей / Гао Фушуай!

Если у вас есть что-то еще, что вы хотите добавить или объяснить, пожалуйста, оставьте комментарий.

Практика делает совершенным!