Каталог статей

• 1. глава vue1. Что такое МВВМ2. Цикл объявления Vue3. Почему данные в Vue должны быть функцией4. vue-router имеет несколько навигационных хуков5. Разница между v-show и v-if в Vue6. Что такое vue-loader? Какова его польза?7. Разница между расчетными свойствами и часами8. Что такое опора?9. Связь компонентов vue10. Существует несколько способов передачи параметров в маршрутизации Vue.11. В чем разница между параметрами запроса и параметрами params?12. Что такое vuex? Каковы атрибуты13. Что такое хранилище vuex?14. Каковы методы использования мутации vuex?15. Как заставить CSS работать только в текущем компоненте16. В чем заключается принцип области видимости?17. Какова функция поддержания активности?18. Разница между delete и Vue.delete для удаления массива19、`nextTick`да Что20. Общие модификаторы v-on21. Почему v-for необходимо привязать Key?22. Приоритет v-for и v-if23. Что такое ref в vue?24. Разница между режимом хеширования маршрутизации и режимом истории Vue25、`route`и`

1. глава vue

1. Что такое МВВМ

MVVM — это аббревиатура Model-View-ViewModel. mvvm — это дизайнерская идея. Уровень модели представляет модель данных, а бизнес-логика для изменения и работы данных также может быть определена в модели; представление представляет собой компонент пользовательского интерфейса, который отвечает за преобразование модели данных в пользовательский интерфейс для отображения. синхронизирует представление и модель.

2. Цикл объявления Vue

Жизненный цикл Vue проходит восемь стадий: 1. beforeCreate (до создания) 2. создан (после создания) 3. beforeMount (перед загрузкой) 4. смонтирован (после загрузки) 5. beforeUpdate (до обновления) 6. обновлено (после обновления) 7. beforeDestroy (перед уничтожением) 8. уничтожен (после разрушения)

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

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

4. vue-router имеет несколько навигационных хуков

1. Глобальный навигационный крючок 2. Зацепки в компонентах 3. Отдельная маршрутизация эксклюзивных компонентов.

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

v-if напрямую влияет на то, будет ли отображаться компонент v-show определяет, равно ли значение display элемента none. Используйте v-show, когда требуются частые операции переключения между отображением и скрытием. Когда переключатель только один, мы используем v-if.

6. Что такое vue-loader? Какова его польза?

vue-loader — это загрузчик, который анализирует файлы .vue. Он преобразует шаблон/js/style в модули js, чтобы файлы .vue могли анализироваться браузерами.

7. Разница между расчетными свойствами и часами

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

8. Что такое опора?

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

9. Связь компонентов vue

Передача от родителя к потомку: Родитель: имя пользовательского атрибута + данные（пройти）=> :value="данные" Ребенок: реквизит ["Имя пользовательского свойства родительского компонента"] =>进行данные接收) Ребенок передает родителю: Зарегистрируйте дочерний компонент в родительском компоненте и привяжите пользовательские прослушиватели событий к тегу дочернего компонента. ребенок：this.$emit(‘Нестандартные вещикускиимя’, данные) Привяжите @custom event name = «функция обратного вызова» к метке подкомпонента. Отец: методы: {пользовательское событие() {//Логическая обработка} } Родственные компоненты: через центральные коммуникации let bus = new Vue() vuex может удовлетворить коммуникационные потребности любого сценария

10. Существует несколько способов передачи параметров в маршрутизации Vue.

1.использоватьqueryМетод переданизпараметриспользоватьthis.$route.queryпринимать 2.использоватьparamsметод, переданный визпараметриспользоватьthis.$route.paramsпринимать

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

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

12. Что такое vuex? Каковы атрибуты

Vuex — это шаблон управления состоянием, разработанный специально для приложений Vue.js. Он имеет 5 атрибутов, а именно состояние, геттер, мутацию, действие, модуль.

13. Что такое хранилище vuex?

vuex — это склад, и на нем размещается множество объектов. Среди них состояние — это место хранения источника данных, которое соответствует данным, хранящимся в состоянии данных в общем объекте vue. Данные, хранящиеся в состоянии данных, являются отзывчивыми. Компонент vue считывает данные из хранилища. хранилище изменится, компоненты, которые полагаются на эти данные, также изменятся, чтобы сопоставить глобальное состояние и методы получения с вычисленными свойствами текущего компонента через MapState.

14. Каковы методы использования мутации vuex?

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

15. Как заставить CSS работать только в текущем компоненте

将当前Группакускииз<style>добавить вдляscoped

16. В чем заключается принцип области видимости?

добавить вscopedсвойствоиз Группакуски,Добавит уникальный знак свойства к узлу HTMLизDOM.,выполнить Похоже на: Функция «область» не влияет на глобальную ситуацию. Таким образом, добавление стиля добавит его к этой уникальной метке для достижения эффекта изоляции стиля.

17. Какова функция поддержания активности?

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

18. Разница между delete и Vue.delete для удаления массива

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

19、$nextTickда Что

$nextTick Это в следующий раз DOM Выполнение отложенного обратного вызова после завершения цикла обновления гарантирует, что функция обратного вызова будет выполнена после обновления DOM.

20. Общие модификаторы v-on

.stop предотвращает всплеск событий вверх. .prevent предотвращает поведение текущего события по умолчанию Обратный вызов запускается только тогда, когда элемент, к которому привязано событие .self, срабатывает сам. Событие, привязанное к .once, будет вызвано только один раз.

21. Почему v-for необходимо привязать Key?

Когда Vue обновляет список отображаемых элементов с помощью v-for, по умолчанию используется стратегия «повторного использования на месте». Если порядок элементов данных изменен, вместо перемещения элементов DOM в соответствии с изменениями элементов данных Vue просто повторно использует каждый элемент и гарантирует, что он отображает каждый элемент, который был отображен по определенному индексу. Предоставьте уникальный ключевой атрибут для каждого элемента, чтобы идентифицировать VNodes при сравнении старых и новых узлов в алгоритме виртуального DOM Vue. Если ключи не используются, Vue использует алгоритм, который минимизирует динамические элементы и пытается восстановить/повторно использовать элементы одного и того же типа, когда это возможно. Используя ключ, он меняет порядок элементов на основе изменений ключа и удаляет элементы, где ключ не существует.

22. Приоритет v-for и v-if

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

23. Что такое ref в vue?

ref используется для регистрации справочной информации для элемента или подкомпонента. Справочная информация будет зарегистрирована в объекте $refs родительского компонента. Если используется в обычном элементе DOM, ссылка указывает на элемент DOM, если используется в дочернем компоненте, ссылка указывает на экземпляр компонента;

24. Разница между режимом хеширования маршрутизации и режимом истории Vue

Режим хеширования обозначается в браузере символом «#». Символы после # и # называются хешем. Они считываются с помощью window.location.hash. История — это новая функция HTML5, использующая pushState() и replaceState. (). Вы можете изменить стек истории браузера и отслеживать изменение статуса события popState. URL-адрес внешнего интерфейса должен соответствовать URL-адресу, который фактически инициирует запрос к серверной части. обработка маршрутизации для /items/id вернет 404 ошибка.

25、$routeи$routerизразница

$routeда“информация о маршрутизациивернослон”,включатьpath,params,hash,query,fullPath,matched,name等информация о маршрутизациипараметр。 $routerда’Экземпляр маршрутизации’вернослонвключать了路由из Метод прыжка,Хуковые функции и т. д.

26. Насколько Vue совместим с IE?

Сам Vue несовместим с IE10 или более ранней версией, но вы можете использовать плагин Babel-Polyfill для улучшения совместимости.

27. Как оптимизировать медленную скорость загрузки первого экрана SPA-приложений

1. Внедрить общедоступную библиотеку JS через тег сценария, уменьшить размер app.bundel, разрешить браузеру параллельную загрузку файлов ресурсов и повысить скорость загрузки; 2. При настройке маршрутизации страницы и компоненты вводятся с использованием отложенной загрузки для дальнейшего уменьшения размера app.bundel, а соответствующий js-файл загружается при вызове компонента; 3. Добавьте изображение загрузки на первый экран, чтобы улучшить взаимодействие с пользователем; 4. Используйте плагин prerender prerender-spa-plugin для создания статических html-файлов для определенных маршрутов.

28. Почему Vue иногда не запускает обновления представления при изменении массивов?

Vue реализует двустороннюю привязку данных через Object.defineProperty(). Передайте обычный объект JavaScript в параметр data экземпляра Vue. Vue просматривает все свойства этого объекта и использует Object.defineProperty для преобразования всех этих свойств в геттеры/сеттеры. При использовании push(), pop(),shift(. ) , unshift(), splice(), sort(),verse() и другие собственные методы массива, которые манипулируют данными, могут инициировать обновление страниц, но возникнут проблемы, если содержимое массива будет изменено непосредственно через индекс. Это можно решить. через Vue.set

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

Двусторонняя привязка данных Vue достигается за счет перехвата данных в сочетании с моделью публикации и подписки. То есть данные и представление синхронизируются, данные меняются, представление меняется, представление меняется, данные также меняются; двусторонняя привязка данных, ее ядром является метод Object.defineProperty()

30. Различия, преимущества и недостатки одностраничных и многостраничных приложений.

Одностраничное приложение — это приложение, имеющее только одну главную страницу. Браузер должен вначале загрузить все необходимые HTML, JS и CSS. Все содержимое страницы содержится на так называемой главной странице. Но при записи они все равно будут записываться отдельно (фрагменты страниц), а затем динамически загружаться программой маршрутизации во время взаимодействия. Одностраничные переходы только обновляют локальные ресурсы. В основном используется на ПК. Многостраничность означает, что в приложении имеется несколько страниц, и при переходе на страницу обновляется вся страница. Преимущество одной страницы заключается в том, что взаимодействие с пользователем удобно и быстро. При изменении контента нет необходимости перезагружать всю страницу. Благодаря этому SPA оказывает меньшую нагрузку на сервер; эффект страницы будет круче (например, специальная анимация при переключении содержимого страницы)). Недостатком одной страницы является то, что она не способствует SEO; если вам нужно перемещаться вперед и назад, вам придется самостоятельно перемещаться вперед и назад. (Поскольку это одна страница и вы не можете использовать функции браузера вперед и назад, вам нужно настроить собственное управление стеком, первоначальная загрузка занимает много времени, сложность страницы сильно возрастает);

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

И ресурсы, и статические файлы хранят статические файлы ресурсов, но файлы статических ресурсов, хранящиеся в ресурсах, будут скомпилированы при упаковке проекта, а статические — нет.

32. RouterLink не работает в IE и Firefox (не прыгает маршрут)

Способ 1. Используйте только тег a, а не тег кнопки. Способ 2. Используйте метку кнопки и метод Router.navigate.

33. В каком периоде функция vue получает данные?

Все в порядке в созданном/beforeMount/монтированном Если вам не нужно ждать рендеринга страницы, лучше всего запросить ее в созданном виде.

34. Кратко опишите принцип работы алгоритма сравнения в Vue.

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

1. Когда данные изменяются, как vueda обновляет узел?

Мы должны знать, что стоимость рендеринга реального DOM очень высока. Например, иногда мы изменяем определенные данные, если мы визуализируем их непосредственно в реальный DOM, это приведет к перерисовке и перестановке всего дерева DOM. возможно, мы обновим только те данные, которые мы изменили, а как насчет небольшого фрагмента dom вместо обновления всего dom? Алгоритм сравнения может нам помочь.

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

Процесс diff заключается в вызове функции с именем patch, сравнении старых и новых узлов и исправлении реального DOM во время сравнения.

1. В чем разница между виртуальным DOM и реальным DOM?

Виртуальный DOM извлекает данные реального DOM и моделирует древовидную структуру в виде объектов. Алгоритм сравнения также сравнивает виртуальный DOM.

1. метод сравнения дифиз?

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

35. Почему в Vue3.0 вместо API defineProperty используется Proxy API?

Адаптивная оптимизация.

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

Адаптивная реализация в Vue2.x основана на дескрипторе в defineProperty, который переопределяет свойства в данных.

Исторически + рекурсивно геттеры и сеттеры устанавливаются для каждого свойства.

Вот почему Vue может реагировать только на предопределенные атрибуты в данных.

Невозможно напрямую изменить значение атрибута путем индексации или добавления уже существующего атрибута объекта. Мониторинг сеттера невозможен.

Послушайте, это ограничение defineProperty.

b. Proxy API Мониторинг ведется за объектом, то все операции над этим объектом будут входить в операцию мониторинга This.

Он может полностью проксировать все атрибуты, что значительно повысит производительность и улучшит код.

Под прокси можно понимать установку слоя «перехвата» перед целевым объектом. Должен быть обеспечен доступ к объекту из внешнего мира.

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

в. Реактивность ленива.

В Vue.js 2.x для объекта с глубоко вложенными свойствами, чтобы перехватить его внутренние изменения, вам необходимо

Рекурсив по значку верный календарь,осуществлять Object.defineProperty Превратите каждый слой объектных данных в адаптивный

Несомненно, будет огромное потребление производительности.。

В Vue.js 3.0 использование Proxy API не позволяет отслеживать глубокие изменения свойств внутри объекта, поэтому

Метод обработки getter середина Используйте рекурсивный и реактивный подход,такизвыгодадаТолько внутренние свойства, к которым фактически осуществляется доступ, станут

Проще говоря, отзывчивость означает реагирование на запросы и снижение потребления производительности.

36. Какие оптимизации были сделаны при компиляции Vue3.0?

а. Создать дерево блоков.

Детализация обновления данных Vue.js 2.x и запуск повторного рендеринга находятся на уровне компонента, и группу необходимо просматривать в рамках одного компонента.

весь кусок vnode 树。существовать 2.0 Здесь скорость эффективности рендеринга положительно связана с размером компонента: чем больше компонент, тем выше эффективность рендеринга.

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

Vue.js 3.0 Благодаря анализу статического шаблона на этапе компиляции компиляция и генерация Block tree。 Block tree

Это вложенный блок, который разрезает шаблон на основе инструкций динамического узла.,каждый Структура узла внутри блока фиксирована.

Каждому блоку необходимо отслеживать только узлы, которые он содержит. так,существовать 3.0 Здесь эффективность рендеринга больше не связана с размером шаблона.

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

б. оптимизация компиляции слотов

В Vue.js 2.x, если компонент передается в слот, то каждый раз, когда родительский компонент обновляется, дочерняя группа будет вынуждена

Обновление файла, приводящее к потере производительности.

Vue.js 3.0 оптимизирует создание слотов, поэтому обновления свойств в нединамических слотах вызывают обновления только подкомпонентов.

Динамический слот означает использование v-if, v-for, имени динамического слота и т. д. в слоте, что приведет к тому, что слот будет генерировать изменения во время выполнения.

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

c. оптимизация алгоритма сравнения.

37. Новые возможности Vue3.0 — сходства и различия между Composition API и хуками в React.js.

а. Базовое использование хуков в React.js.

React Hooks позволяют вам «подключаться» к таким функциям React, как состояние компонента и обработка побочных эффектов. Крючки могут только

Используется в функциональных компонентах и ​​позволяет нам добавлять состояние, побочные эффекты и многое другое без создания класса.

в компонент.

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

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

useState и useEffect — примеры React Hooks, которые позволяют добавлять состояние и функциональность к функциональным компонентам.

Побочные эффекты от бега.

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

б. Базовое использование API композиции Vue.

API Vue Composition построен на основе новой опции компонента, называемой setup. setup() предоставляет компонентам Vue

Состояние, вычисленные значения, наблюдатели и перехватчики жизненного цикла.

Это не приводит к исчезновению исходного API (API на основе параметров). Разрешить разработчикам использовать как старые, так и новые API вместе.

(обратная совместимость).

в. Принцип

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

Все крючки.

Хук Vue будет зарегистрирован и вызван только один раз. Vue позволяет избежать этих неприятных проблем из-за его влияния на данные.

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

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

проблемы).

В React, когда данные изменяются, это вызывает повторный рендеринг, а повторный рендеринг снова вводит хуки.

Зарегистрируйтесь один раз, и сложность React будет выше.

38. Как Vue3.0 становится быстрее?

а. оптимизация метода различий

Виртуальный дом в Vue2.x выполняет полное сравнение.

В Vue3.0 добавлен новый статический тег (PatchFlag): при сравнении с последним виртуальным узлом сравнение значений

с patch flag узлы и могут быть переданы flag из Информация, позволяющая узнать, что текущий узел хочетверно Сравниватьиз Конкретный контент。b. hoistStatic статический импульс

Vue2.x: Независимо от того, участвует элемент в обновлении или нет, он будет создаваться заново каждый раз.

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

c. Кэш прослушивателя событий cacheHandlers.

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

функция, поэтому нет отслеживания изменений, просто кэшируйте ее и используйте повторно.

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

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

DOM-операций, тем самым повышая производительность.

Конкретные этапы реализации следующие:

1. Используйте структуру объектов JavaScript для представления структуры дерева DOM, а затем используйте это дерево для построения реального дерева DOM;

Вставить в документ;

2. При изменении состояния восстановить новое дерево объектов. Затем сравните новое дерево со старым и запишите

Разница между двумя деревьями;

Примените различия, записанные на шаге 2, к реальному дереву DOM, построенному на шаге 1, и представление обновится.

40. Последовательность выполнения функции перехвата жизненного цикла родительско-дочернего компонента Vue.

Загрузить процесс рендеринга отецперед Создать -> отец создал -> отец до горы -> childbeforeCreate -> ребенок создал -> Ребенок перед монтированием -> ребенок установлен -> отец верхом Процесс обновления подкомпонента отец перед обновлением -> дочернее обновление -> ребенок обновлен -> отец обновлен Процесс обновления родительского компонента отец перед обновлением -> отец обновлен процесс разрушения Отец перед уничтожением -> Ребенок до уничтожения -> ребенок уничтожен -> отец уничтожил

41. Принцип v-модели

v-модель — это просто синтаксический сахар. v-модель внутренне использует разные свойства для разных элементов ввода и генерирует разные события. Элементы text и textarea используют свойство value и события ввода; флажок и радио используют проверенное свойство и события изменения; Поле выбора принимает значение как опору и изменение как событие. Примечание. Для языков, требующих использования метода ввода, вы обнаружите, что v-модель не будет обновляться в процессе составления текста метода ввода. На обычном элементе: вход v-model=’sth’ input v-bind:value=’sth’ v-on:input=’sth = $event.target.value’

42. Принцип привязки событий Vue

Собственная привязка событий привязывается к реальным элементам через addEventListener, а привязка событий компонента реализуется через специальный $on Vue. Если вы хотите использовать собственные события в компоненте, вам необходимо добавить модификатор .native, который эквивалентен обработке дочернего компонента как обычного HTML-тега в родительском компоненте, а затем добавлению собственных событий. o n, on, on и submit основаны на модели публикации и подписки. Когда этот параметр включен, события сохраняются в центре событий по имени и называются подписчиками. После этого emite публикует соответствующие события для выполнения. центр событий Соответствующий прослушиватель внутри.

43. Что такое функция маршрутизации vue-router? Каков порядок исполнения?

Процесс выполнения перехватчиков маршрутизации. Типы функций перехватчиков включают в себя: глобальную защиту, защиту маршрутизации и защиту компонента. Полный процесс навигационного анализа: 1. Навигация срабатывает. 2. Вызовите защиту beforeRouterLeave в деактивированном компоненте. 3. Вызов глобального перед каждым охранником. 4. Вызовите защиту beforeRouterUpdate (2.2+) для повторно используемого компонента. 5. Прежде Войдите в конфигурацию маршрутизации. 6. Анализ компонентов асинхронной маршрутизации. 7. Вызовите beforeRouterEnter в активированном компоненте. 8. Вызовите глобальную защиту beforeResolve (2.5+). 9. Навигация подтверждена. 10. Вызовите глобальный хук afterEach. 11. Запустить обновление DOM. 12. Вызовите функцию обратного вызова, переданную в функцию next в защите beforeRouterEnter. Созданный экземпляр компонента будет передан в качестве параметра функции обратного вызова.

44. Как решить проблему потери данных при обновлении страницы Vuex?

Если вам необходимо сохранить данные vuex, вы обычно используете локальное хранилище для сохранения данных. Вы можете разработать собственное решение для хранения или использовать сторонний плагин. Рекомендуется использовать плагин vuex-persist, который представляет собой плагин для постоянного хранилища Vuex. Вам не нужно вручную получать доступ к хранилищу, а сохранять состояние непосредственно в файлы cookie или localStorage.

Или используйте пинию для решения

45. Почему Vuex нужно разделить на модули и добавить пространства имен?

Модуль: Благодаря использованию единого дерева состояний все состояния приложения будут сосредоточены в относительно большом объекте. Когда приложение становится очень сложным, объекты хранилища могут сильно раздуться. Чтобы решить вышеуказанные проблемы, Vuex позволяет разделить хранилище на модули. Каждый модуль имеет свое собственное состояние, мутацию, действие, метод получения и даже вложенные подмодули.

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

46. ​​Использовали ли вы Vue SSR? Поговорим о ССР

SSR — это рендеринг на стороне сервера. Это означает, что Vue преобразует теги в HTML на стороне клиента и завершает его на стороне сервера, а затем возвращает HTML непосредственно клиенту.

преимущество: У SSR лучшее SEO, и первый экран загружается быстрее. недостаток: Условия разработки будут ограничены. Рендеринг на стороне сервера поддерживает только два хука: beforeCreate и create. Когда нам нужны некоторые внешние библиотеки расширений, приложения рендеринга на стороне сервера также должны находиться в рабочей среде Node.js. Сервер будет иметь более высокие требования к нагрузке.

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

1. Фабричный режим — создайте экземпляр, передав параметры. Виртуальный DOM возвращает Vnode базового тега и Vnode компонента в зависимости от параметров. 2. Режим Singleton – вся программа имеет один и только один экземпляр Метод регистрации плагина install для vuex и vue-router определяет, существует ли экземпляр в системе, и возвращает его напрямую. 3. Модель публикации-подписки. (механизм событий vue) 4. Режим наблюдателя. (Принцип адаптивных данных) 5. Режим декоратора (использование @decorator) 6. Режим стратегии. Режим стратегии означает, что объект имеет определенное поведение, но в разных сценариях поведение имеет разные решения реализации — например, стратегию слияния вариантов.

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

Здесь мы перечисляем только оптимизацию производительности для Vue. Оптимизация производительности всего проекта — это большой проект.

Не делайте иерархию объектов слишком глубокой, иначе производительность будет низкой. Не помещайте в данные данные, которые не требуют оперативности. v-if и v-show различают сценарии использования вычисление и просмотр используются в разных сценариях v-для обхода необходимо добавить ключ, желательно, чтобы ключ был значением идентификатора, и избегайте одновременного использования v-if Оптимизация производительности списка больших данных и таблиц — виртуальный список/виртуальная таблица Чтобы предотвратить внутренние утечки, глобальные переменные и время уничтожаются после уничтожения компонента. Ленивая загрузка изображений Ленивая загрузка маршрутов Асинхронная маршрутизация Загрузка сторонних плагинов по требованию Надлежащее использование компонентов поддерживающего кэширования. Применение антитряски и троттлинга Рендеринг на стороне сервера SSR или предварительный рендеринг

49. Сценарии использования и принципы Vue.mixin

В повседневной разработке мы часто сталкиваемся с одними и теми же или похожими кодами, которые часто используются в разных компонентах. Функции этих кодов относительно независимы. объекты». », при инициализации компонента будет вызван метод mergeOptions для слияния, а режим стратегии будет использоваться для слияния различных атрибутов. Если компонент и примесь содержат параметры с одинаковыми именами, эти параметры будут «объединены» соответствующим образом.

50. Сценарии и принципы использования nextTick

nextTick вперезвонить Это в следующий раз DOM Отложенный обратный вызов, выполняемый после завершения цикла обновления. Используйте этот метод сразу после изменения данных, чтобы получить обновленную информацию. ДОМ. Основная идея заключается в использовании приоритета микрозадач для вызова асинхронных методов для выполнения. nextTick Способ упаковки.

51. Сценарии и принципы использования Keep-Alive

Keep-alive — это встроенный компонент Vue, который может реализовывать кэширование компонентов. Текущий компонент не будет выгружен при переключении компонента.

Два часто используемых атрибута include/exclude позволяют условно кэшировать компоненты. Два жизненных цикла, активированный/деактивированный, используются для определения того, обрабатывает ли текущий компонент активное состояние. Keep-Alive использует алгоритм LRU для выбора последних неиспользованных компонентов для удаления.

52. Принцип метода Vue.set

Студенты, которые понимают принцип реагирования Vue, знают, что изменение Vue в любом случае не приведет к обновлению представления. 1. Добавьте новые атрибуты в экземпляр после создания экземпляра (добавьте атрибуты в адаптивный объект). 2. Непосредственно измените индекс массива, чтобы изменить значение массива. Принцип Vue.set или $set заключается в следующем. Из-за отзывчивости данных мы добавили новый атрибут __ob__ к самому объекту и массиву, который представляет экземпляр Observer. При добавлении несуществующего атрибута к объекту новый атрибут сначала будет оперативно отслеживаться, а затем наблюдатель, собранный dep объекта ob, будет запущен для обновления. Когда индекс массива изменяется, мы вызываем метод splice. сам массив для обновления массива.

53. Функция и принцип Vue.extend

Официальное объяснение: Vue.extend использует базовый конструктор Vue для создания «подкласса». Параметр представляет собой объект, содержащий параметры компонента.

Фактически, это конструктор подкласса и основной API компонента Vue. Идея реализации состоит в том, чтобы использовать метод прототипного наследования для возврата подкласса vue и использовать mergeOptions для объединения параметров входящего компонента с параметрами родительского класса.

54. Писали ли вы когда-нибудь индивидуальные инструкции? Каков принцип?

Директивы — это, по сути, декораторы, которые являются расширениями Vue для элементов HTML и добавляют к элементам HTML пользовательские функции. Когда vue компилирует DOM, он находит объект инструкции и выполняет методы, связанные с инструкциями.

Пользовательские инструкции имеют пять жизненных циклов (также называемых функциями-перехватчиками), а именно привязку, вставку, обновление, обновление компонента и отмену привязки.

1. привязка: вызывается только один раз, когда инструкция привязывается к элементу в первый раз. Здесь можно выполнить настройки однократной инициализации. 2. Вставленный: вызывается, когда связанный элемент вставляется в родительский узел. 3. update: вызывается, когда шаблон, в котором находится привязанный элемент, обновляется, независимо от того, изменяется ли значение привязки. Сравнивая значения привязки до и после. 4. компонент Обновление: вызывается, когда шаблон, в котором находится связанный элемент, завершает цикл обновления. 5. unbind: вызывается только один раз, когда инструкция отвязывается от элемента. принцип: 1. При создании синтаксического дерева ast атрибут директив будет добавлен к текущему элементу при обнаружении директивы. 2. Сгенерируйте код инструкции с помощью genDirectives. 3. Извлеките перехват инструкции в cbs перед исправлением и вызовите соответствующий перехват во время процесса исправления. 4. Когда выполняется функция-перехватчик, соответствующая инструкции, вызывается соответствующий метод определения инструкции.

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

модификатор события .stop предотвращает дальнейшее распространение события .prevent предотвращает поведение метки по умолчанию .capture использует режим захвата событий, то есть здесь сначала обрабатываются события, вызванные самим элементом, а затем передаются на обработку внутренним элементам. .self запускает функцию обработчика только тогда, когда event.target сам является текущим элементом Событие .once будет вызвано только один раз. .passive сообщает браузеру, что вы не хотите блокировать поведение события по умолчанию. Модификаторы для v-модели .lazy использует этот модификатор для переключения на ресинхронизацию в событии изменения. .number автоматически преобразует введенные пользователем значения в числовые типы .trim автоматически фильтрует конечные пробелы, введенные пользователем Модификатор событий клавиатуры .входить .tab .delete (захватывает клавиши «удалить» и «возврат») .esc .космос .вверх .вниз .левый .верно системный модификатор .ctrl .alt .сдвиг .мета Модификатор кнопки мыши .левый .верно .середина

56. Принцип компиляции шаблона Vue

Процесс компиляции Vue — это процесс преобразования шаблона в функцию рендеринга, который разделен на следующие три этапа: Первым шагом является преобразование строк шаблона в элементы AST (парсер). Второй шаг — статическая маркировка узлов AST, которая в основном используется для оптимизации рендеринга виртуального DOM (оптимизатора). Третий шаг — использовать элементы AST для генерации строки кода функции рендеринга (генератор кода).

57. Как реализуются перехватчики жизненного цикла?

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

58. Можете ли вы рассказать о часто используемых режимах маршрутизации и принципах реализации в vue-router?

хэш-шаблон 1. Значение location.has на самом деле соответствует тому, что следует за # в URL-адресе. Его особенностью является то, что хотя хэш и появляется в URL-адресе, он не будет включен в HTTP-запрос и вообще не повлияет на серверную часть, поэтому изменение хеша не приведет к перезагрузке страницы.

2. Вы можете добавить события прослушивания для изменений хеша.

window.addEventListener(“hashchange”,funcRef,false)

Каждый раз, когда хеш (window.location.hash) изменяется, запись будет добавляться в историю доступа браузера. Используя вышеуказанные характеристики хеша, функция внешней маршрутизации «обновление представления, но не повторный запрос страницы». "можно реализовать. Особенности: Хорошая совместимость, но некрасивая.

режим истории Воспользуйтесь преимуществами новых методов pushState() и replaceState() в интерфейсе истории HTML5.

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

Особенности: Несмотря на то, что это красиво, при обновлении появляется ошибка 404, и необходимо настроить серверную часть.

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