предисловие
Мне прошлой ночью приснился сон.Мне приснилось,что я иду на большую фабрику на собеседование.Интервьюер подошел к комнате и сел:Это Ян Йойо? Международная практика, позвольте мне сначала представиться.
Так что я начал двухминутное представление себя, в то же время интервьюер слушал и смотрел мое резюме, хмурясь при просмотре, и после окончания спросил: я вижу, что вы часто используете Vue в своих предыдущих проектах, вы знакомы с Вью?
Уголок моего рта улыбнулся, и я был тайно счастлив: К счастью, есть вопросы для интервью для Vue, На этот раз он кажется стабильным. Такой скромный и делающий вид, что отвечает: ладно, можешь спрашивать, что хочешь.
Итак, интервьюер посмотрел на меня таким высоким тоном и подумал про себя: «Йо-хо, здесь есть человек, принуждающий к принуждению, а рабочие и руководство будут спрашивать Vue только сегодня».
исходный адресприветственная звезда
Давай, сначала представь системы отклика Vue
Vue — это инфраструктура MVVM. Когда данные модели данных изменяются, представление страницы будет обновляться в ответ. Принцип заключается в перехвате метода получения/установки данных (Object.defineProperty или Proxy) и использовании схемы публикации-подписки. шаблон в методе получения. Подпишитесь, опубликуйте уведомление в методе установки и позвольте всем подписчикам заполнить ответ.
В адаптивной системе Vue создаст новый центр подписки в качестве издателя для каждого атрибута данных модели данных, а три роли прослушивателя, вычисляемый атрибут и шаблон/рендеринг представления также используются в качестве подписчиков. , Для просмотра слушателя он будет напрямую подписываться на свойства наблюдения и мониторинга.Для вычисляемых свойств и шаблона/рендеринга представления, если свойство данных получено внутренним выполнением, будет выполнен метод получения свойства, и затем подписка на свойство будет автоматически завершена.При изменении свойства выполняется метод установки свойства, тем самым завершая уведомление о публикации свойства и уведомляя всех подписчиков об обновлении.
Разница между вычислением и просмотром
Как вычисляемое свойство, так и прослушиватель могут наблюдать за изменением свойства и реагировать, разница заключается в следующем:
Вычисляемое свойство вычисляется в большей степени как наблюдатель функции кэширования. Оно может выполнять сложные вычисления для одного или нескольких свойств данных, чтобы сгенерировать новое значение и предоставить его функции рендеринга. При изменении зависимых свойств вычисляемое не будет немедленно пересчитано в сгенерировать новое значение, но сначала пометить его как грязные данные, а когда будет получено следующее вычисленное значение, оно будет пересчитано и возвращено.
Часы-слушатель не кэшируются.Наблюдение-слушатель предоставляет функцию слушателя, которая будет выполняться немедленно при изменении отслеживаемого свойства.
Представьте жизненный цикл Vue
beforeCreate: это первый хук, запускаемый после new Vue(), данные и методы для данных, методы, вычисляемые и наблюдаемые данные недоступны на текущем этапе.
created: Происходит после того, как экземпляр создан, наблюдение за данными завершено на текущем этапе, то есть данные можно использовать и изменять, и изменение данных здесь не приведет к запуску обновленной функции. Вы можете сделать начальный сбор данных. Вы не можете взаимодействовать с Домом на текущем этапе. Если вам нужно, вы можете получить доступ к Дому через vm.$nextTick.
beforeMount: Происходит перед монтированием, до того, как шаблон шаблона был импортирован в компиляцию функции рендеринга. На данном этапе виртуальный Дом создан и вот-вот начнется рендеринг. В этот момент также можно вносить изменения в данные, не запуская обновление.
mounted: Происходит после завершения монтирования На текущем этапе монтируется настоящий Дом, данные привязываются в обоих направлениях, возможен доступ к узлу Дома, а атрибут $refs может использоваться для работы с Домом.
beforeUpdate: Это происходит перед обновлением, то есть обновляются отзывчивые данные, и срабатывает перед повторным рендерингом виртуального дома.Вы можете изменить данные на текущем этапе, не вызывая повторного рендеринга.
updated：发生在更新完成之后，当前阶段组件Dom已完成更新。 Важно избегать изменения данных в течение этого времени, так как это может привести к бесконечному циклу обновлений.
beforeDestroy: Происходит перед уничтожением экземпляра. На текущем этапе экземпляр можно использовать полностью. В это время мы можем сделать последние штрихи, например сбросить таймер.
destroyed: Происходит после уничтожения экземпляра, и в это время остается только оболочка dom. Компоненты были разобраны, привязки данных разобраны, слушатели удалены, а дочерние экземпляры уничтожены.
Почему данные компонента должны быть функцией
Компонент может использоваться во многих местах, то есть будет создано много экземпляров. Если данные являются объектом, объект является ссылочным типом. Если один экземпляр изменяет данные, это повлияет на другие экземпляры, поэтому данные должны использовать функции для создания для каждого экземпляра.Собственные данные, чтобы разные экземпляры одного и того же компонента не влияли друг на друга.
Как компоненты взаимодействуют друг с другом
- Взаимодействие компонентов родитель-потомок
Родительский компонент -> дочерний компонент:prop
Дочерний компонент -> родительский компонент:$on/$emit
Получить экземпляр компонента: использовать$parent/$children,$refs.xxx, напрямую получить данные атрибута или вызвать метод компонента после получения экземпляра
- Взаимодействие компонентов родственного компонента
Шина событий: каждый экземпляр Vue представляет собой шину событий, которая поддерживает$on/$emit, вы можете создать новый экземпляр Vue между экземплярами родственных компонентов и взаимодействовать как шина событий.
Vuex: извлечение состояния и методов в Vuex, полное совместное использование
- Взаимодействие компонентов между уровнями
Используйте предоставление/внедрение
Шина событий: связь с шиной событий родственного компонента.
Vuex: извлечение состояния и методов в Vuex, полное совместное использование
Поговорим о принципе привязки событий Vue
Каждый экземпляр Vue представляет собой шину событий. Когда создается дочерний компонент, родительский компонент передает событие дочернему компоненту. Когда дочерний компонент инициализируется,$onМетод регистрирует событие внутри и использует его при необходимости.$emitТриггерные функции и собственные события используют addEventListener для привязки к реальным элементам DOM.
что такое слот? каков эффект? Каков принцип?
Слот, также известный как слот, представляет собой механизм распределения контента Vue, механизм шаблонов внутри компонента использует элемент слота в качестве выхода для переноса распределенного контента. Слот слот является шаблонным элементом метки дочернего компонента, и то, отображается ли этот элемент метки и как он отображается, определяется родительским компонентом.
Слоты делятся на три категории: слоты по умолчанию, именованные слоты и слоты с ограниченной областью действия.
- Слот по умолчанию: также известный как анонимная проверка, когда для слота не указано значение атрибута имени, отображается слот по умолчанию, а в компоненте есть только один анонимный слот.
- Именованный слот: слот с определенным именем, то есть слот с атрибутом имени, компонент может иметь несколько именованных слотов.
- Слот с областью: вариант слота по умолчанию и именованного слота, который может быть анонимным слотом или именованным слотом.Разница этого слота в том, что когда подкомпонент отображает слот с областью действия, подкомпонент может передавать данные внутри компонента родительскому компоненту, а родительский компонент решает, как отображать слот на основе данных, переданных от дочернего компонента.
Принцип реализации: при создании экземпляра дочернего компонента vm содержимое тега слота, переданного родительским компонентом, получается и сохраняется вvm.$slot, слот по умолчаниюvm.$slot.default, именованный слотvm.$slot.xxx, xxx — имя слота.Когда компонент выполняет функцию рендеринга, он сталкивается с тегом слота и использует$slotЗамените содержимое в слоте. В это время для слота могут быть переданы данные. Если есть данные, слот можно назвать слотом с заданной областью действия.
Каков принцип рендеринга шаблона Vue?
Шаблон шаблона в Vue не может быть проанализирован и отображен браузером, потому что это не стандарт браузера, неправильный синтаксис HTML, все они должны преобразовать шаблон в функцию JavaScript, чтобы браузер мог выполнять эту функцию и отображать соответствующий Элемент HTML может заставить представление работать, этот процесс преобразования становится компиляцией шаблона.
Компиляция шаблона разделена на три этапа: синтаксический анализ, оптимизация, оптимизация, генерация генерации и, наконец, генерация исполняемой функции рендеринга.
- Этап синтаксического анализа: используйте большое количество регулярных выражений для анализа строки шаблона и преобразования тегов, инструкций, атрибутов и т. д. в абстрактные синтаксические деревья AST.
- Стадия оптимизации: просмотрите AST, найдите несколько статических узлов и отметьте их, чтобы при выполнении сравнения различий при повторном рендеринге страницы эти статические узлы можно было пропустить напрямую для оптимизации производительности среды выполнения.
- Этап генерации: преобразовать окончательный AST в строку функции рендеринга.
Что такое прекомпиляция шаблона?
Для компонентов Vue компиляция шаблона компилируется только один раз при создании экземпляра компонента и не будет компилироваться после создания функции рендеринга. Таким образом, компиляция снижает производительность среды выполнения компонента.
Целью компиляции шаблона является только преобразование шаблона вrender function, Этот процесс может быть завершен в процессе построения проекта, что позволяет фактическому компоненту пропускать отрисовку шаблона непосредственно во время выполнения, тем самым повышая производительность.Этот процесс компиляции шаблонов во время построения проекта называется предварительной компиляцией.
В чем разница между шаблоном и jsx?
Во время выполнения нам нужно только убедиться, что компонент имеет функцию рендеринга, а после предварительной компиляции нам нужно только убедиться, что функция рендеринга генерируется в процессе построения.
В вебпаке мы используемvue-loaderСкомпилируйте файлы .vue, внутренние зависимостиvue-template-compilerМодули в процессе сборки веб-пакета прекомпилируют шаблоны в функции рендеринга.
Как и в случае с react, добавлен анализатор синтаксического сахара jsx.babel-plugin-transform-vue-jsxПосле этого вы можете напрямую написать функцию рендеринга.
Следовательно, и шаблон, и jsx являются формой рендеринга, разница в следующем:
По сравнению с шаблоном JSX обладает большей гибкостью и имеет больше преимуществ в сложных компонентах, но шаблон немного скучен. Однако структура кода шаблона больше соответствует привычке разделять представление и логику, что проще, интуитивно понятнее и удобнее в сопровождении.
Скажи мне, что такое виртуальный DOM
Виртуальный DOM — это абстрактная структура данных узлов DOM в JavaScript Причина, по которой виртуальный DOM необходим, заключается в том, что стоимость эксплуатации DOM в браузерах относительно высока, а частые манипуляции с DOM вызовут проблемы с производительностью. Функция виртуального DOM состоит в том, чтобы сравнивать виртуальный DOM до и после обновления каждый раз, когда реагирующие данные изменяются и вызывают повторную визуализацию страницы, и сопоставлять, чтобы найти как можно меньше реальных DOM, которые необходимо обновить, чтобы для достижения цели повышения производительности.
Представьте алгоритм Diff в Vue
При сравнении старого и нового виртуального DOM
- Сначала сравните сами узлы, чтобы определить, являются ли они одним и тем же узлом.Если это не один и тот же узел, удалите узел и заново создайте узел для замены.
- Если это один и тот же узел, выполните patchVnode, чтобы определить, как обрабатывать дочерние узлы узла.Во-первых, определите, есть ли у одной стороны дочерние узлы, а у другой нет дочерних узлов (если новые дочерние узлы не имеют дочерних узлов, удалите старые дочерние узлы)
- Если в сравнении есть дочерние узлы, выполняется updateChildren, чтобы определить, как работать с дочерними узлами этих новых и старых узлов (diff core).
- При сопоставлении найти тот же дочерний узел, рекурсивно сравнить дочерние узлы
В diff сравниваются только дочерние узлы одного и того же слоя, а межуровневое сравнение узлов оставлено, что усложняет время отO(n^3)меньшее значениеO(n), то есть только тогда, когда старый и новый дочерние узлы являются несколькими дочерними узлами, для сравнения одного уровня необходимо использовать базовый алгоритм Diff.
Какова функция ключевого атрибута
В процессе сравнения узлов очень важным условием для определения того, являются ли они одним и тем же узлом, является равенство ключей.Если они являются одним и тем же узлом, исходный узел DOM будет максимально повторно использоваться. Таким образом, ключевой атрибут предоставляется фреймворку для использования при сравнении, а не разработчику.
Поговорите о разнице между Vue2.0 и Vue3.0
- Рефакторинг адаптивной системы, замена Object.defineProperty на Proxy и использование преимуществ Proxy:
- Прямое прослушивание изменений данных в типах массива
- Целью мониторинга является сам объект, и нет необходимости просматривать каждое свойство, такое как Object.defineProperty, которое имеет определенное улучшение производительности.
- Он может перехватывать 13 методов, таких как apply, ownKeys, has и т. д., но Object.defineProperty не может.
- Непосредственно реализовать добавление/удаление свойств объекта
- Добавлен Composition API для лучшего повторного использования логики и организации кода.
- Рефакторинг виртуального DOM
- Оптимизация шаблонов во время компиляции, компиляция некоторых статических узлов в константы
- Оптимизация слота, скомпилируйте слот в ленивую функцию и передайте решение об отрисовке слота дочернему компоненту
- Извлечение и повторное использование встроенных событий в шаблонах (изначально повторное создание встроенных функций для каждого рендеринга)
- Регулировка структуры кода упрощает встряхивание дерева, так что чем меньше
- Замена Flow на Typescript
Зачем добавлять Composition API и какие проблемы он может решить
В Vue 2.0 с увеличением количества функций компоненты становятся все более и более сложными и более сложными в обслуживании.Основная причина сложности в обслуживании заключается в том, что дизайн API Vue вынуждает разработчиков использовать параметры просмотра, вычислений и методов для организации кода. , пока не реальная бизнес-логика.
Кроме того, в Vue 2.0 отсутствует относительно простой и недорогой механизм для полного повторного использования логики.Хотя minxis может выполнять повторное использование логики, при наличии большего количества миксинов будет трудно найти источник соответствующих данных, вычислений или методов. mixin, который затрудняет вывод типов.
Таким образом, появление API-интерфейса Composition в основном связано с решением проблем, вызванных API-интерфейсом Option.Во-первых, это проблема организации кода.API-композиции позволяет разработчикам организовывать свой собственный код в соответствии с бизнес-логикой, чтобы код лучше Удобочитаемость и Масштабируемость означают, что когда следующий разработчик вступает в контакт с этим фрагментом кода, который он не писал сам, он может лучше использовать организацию кода для вывода фактической бизнес-логики или лучше понять код в соответствии с бизнес-логика.
Во-вторых, добиться логического извлечения и повторного использования кода.Конечно, миксины также могут обеспечить логическое извлечение и повторное использование, но, как упоминалось выше, когда несколько миксинов воздействуют на один и тот же компонент, трудно увидеть, из какого миксина исходит свойство. , источник неясен, и, кроме того, свойства нескольких примесей могут привести к конфликту имен переменных. Composition API как раз решает эти две проблемы.
Говорят, что Composition API очень похож на React Hook, поговорим о разнице
С точки зрения реализации React Hook, React Hook определяет, из какого useState исходит состояние следующего повторного рендеринга в соответствии с порядком вызовов useState, поэтому появляются следующие ограничения.
- Хуки нельзя вызывать в циклах, условиях, вложенных функциях
- Обязательно всегда вызывайте Hook на верхнем уровне вашей функции React.
- Такие функции, как useEffect, useMemo и т. д., должны вручную определять зависимости
Composition API реализован на основе адаптивной системы Vue, по сравнению с React Hook.
- Объявите, что в функции настройки компонент создает только вызовы setup, а React Hook должен вызывать ловушку при каждом рендеринге, так что GC реакции оказывает большее давление, производительность также ниже, чем у Vue.
- Вызову API композиции не нужно беспокоиться о порядке вызова, а также его можно использовать в циклах, условиях и вложенных функциях.
- Отзывчивая система автоматически реализует сбор зависимостей, а затем оптимизация производительности компонентной части выполняется самим Vue, в то время как React Hook должен вручную передавать зависимости и должен обеспечивать порядок зависимостей, чтобы такие функции, как useEffect и useMemo, могли работать. правильно захватывать зависимые переменные, иначе производительность компонента ухудшится из-за некорректных зависимостей.
Хотя Compositeton API кажется более простым в использовании, чем React Hook, его дизайнерские идеи также заимствованы из React Hook.
Вы знаете о ССР? Каков принцип?
Когда клиент запрашивает сервер, сервер получает соответствующие данные из базы данных, преобразует компоненты Vue в HTML внутри сервера и вместе возвращает данные и HTML клиенту.Это преобразует данные и компоненты в HTML. называется SSR рендеринга на стороне сервера.
Когда клиент получает HTML и данные, отображаемые сервером, поскольку данные уже существуют, клиенту не нужно снова запрашивать данные, а нужно только синхронизировать данные с компонентом или Vuex. В дополнение к случайным данным, HTML также имеет структуру.Когда клиент отображает компоненты, ему нужно только сопоставить узлы HTML DOM с виртуальным DOM без повторного создания узлов DOM.Этот процесс синхронизации данных и HTML также называется активацией клиента.
Преимущества использования SSR:
-
Способствует SEO: на самом деле сканерам выгодно сканировать ваши страницы, потому что некоторые сканеры страниц не поддерживают выполнение JavaScript.Страница без SSR, захваченная сканером, который не поддерживает выполнение JavaScript, будет пустой HTML-страницей. SSR, эти поисковые роботы могут получить данные о полной структуре HTML, а затем включить их в поисковую систему.
-
Более короткое время белого экрана: по сравнению с рендерингом на стороне клиента, рендеринг на стороне сервера уже получает текст HTML с данными после того, как браузер запрашивает URL-адрес. Браузеру нужно только проанализировать HTML и напрямую построить дерево DOM. Для рендеринга на стороне клиента вам нужно сначала получить пустую HTML-страницу. В это время страница перешла на белый экран. После этого вам нужно загрузить и выполнить JavaScript, запросить внутренний сервер для получения данных и визуализировать страницу с помощью JavaScript до того, как вы увидите окончательную страницу. Особенно в сложных приложениях, поскольку необходимо загружать сценарии JavaScript, чем сложнее приложение, тем больше и больше сценариев JavaScript необходимо загружать, что приведет к очень длительному времени загрузки первого экрана приложения, тем самым уменьшая опыт.
ПодробнееГлубокое понимание рендеринга на стороне сервера — принцип SSR
конец
Интервьюер кивнул, гм, этот парень тоже может знать больше, вы можете получить в письменном бизнесе.
Я тоже втайне обрадовался, к счастью, я не просил этого, а потом я сидел и хихикал, улыбался и смеялся, и вдруг услышал, как зазвенел мой будильник, и тогда я проснулся ото сна.
Затем начался новый день перемещения кирпичей.