предисловие

2019 год подходит к концу, не пора ли снова бороться за лучший 2020 год? «Победа или поражение, семейные дела неожиданны, а позор человеку. Дети Цзяндуна талантливы, и неизвестно, вернутся ли они обратно». Готовы ли те, кто потерпел неудачу в осенних новобранцах, сдаться!

В этой статье обобщаются некоторые из наиболее популярных вопросов на собеседованиях по моему опыту и просмотру статей с 2019 года, охватывающих основы интерфейса и продвинутые знания от CSS до JS и Vue до сети.

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

css篇 - nuggets.capable/post/684490…
Javavscript篇 - nuggets.capable/post/684490…
ECMAScript 6篇 - nuggets.capable/post/684490…

Module Four - Vue

«О базе»

Расскажите мне о своем понимании MVVM? Чем он отличается от MVC?

MVCОтноситсяModel-View-Controller, т.е. модель-представление-контроллер.
- использоватьMVCЦель состоит в том, чтобы отделить модель от представления
- MVCОн относится к односторонней связи и должен проходить черезControllerЧтобы связать вышеуказанное, контроллер должен получить данные, вернуть результат во внешний интерфейс и повторно отобразить страницу.
MVVMОтноситсяModel-View-ViewModel, то есть модель модель-представление-представление, «модель» относится к данным, передаваемым серверной частью, «представление» относится к странице, которую вы видите, а «модель представления»MVVMв основе, это связьViewа такжеModelмост,выполнитьviewизменения автоматически обновляются доviewModelсередина,viewModelИзменения также автоматически отображаются вviewначальство, этопредставление на основе данныхмодель

разница:

MVCсерединаControlсуществуетMVVMпревратилась вviewModel
MVVMОтображение представлений через данные, а не через операции узла
MVVMВ основном решеноMVCбольшое количествоDOMоперация, которая снижает производительность рендеринга страницы, замедляет скорость загрузки и влияет на взаимодействие с пользователем.

Расскажите, пожалуйста, принцип адаптивных данных Vue?

VueЯдром нижнего слоя для реагирующих данных являетсяobject.defineProperty,VueПри инициализации данных он дастdataиспользование имущества вobject.definePropertyПереопределить свойства (перехват свойствgetterа такжеsetter), когда на странице используется соответствующий атрибут, он будет обработан через класс DEPКоллекция зависимостей(собирает текущий компонентwatcher), если свойство изменится, оно уведомит соответствующие зависимости о вызове своего метода обновления для операции обновления.

Суммировать:VueСотрудничайте с шаблоном проектирования издатель-подписчик посредством перехвата данных, внутренне позвонивobject.defineProperty()захватить каждое имуществоgetterа такжеsetter, уведомлять подписчиков об изменении данных и запускать соответствующие обратные вызовы

Для основного исходного кода вы можете увидеть эту статью:сегмент fault.com/ah/119000001…

Как Vue реализует адаптивные данные?

Двусторонняя привязка данных Vue относится к следующему: данные изменяются для обновления представления, а представление изменяется для обновления данных.Например, когда входное содержимое поля ввода изменяется, данные в данных изменяются синхронно; когда данные при изменении данных содержимое текстового узла изменяется синхронно.

Vue в основном реализует адаптивные данные с помощью следующих 4 шагов.

Реализуйте прослушиватель «Наблюдатель»: пройдите объект данных, включая свойства объекта подсвойства, используйтеObject.defineProperty()добавить в атрибутыgetterа такжеsetter, после этого присвоение значения определенному значению объекта сработаетsetter, то вы сможете отслеживать изменения данных
Реализовать синтаксический анализатор «Компилировать»: синтаксический анализVueИнструкция шаблона, замените переменные в шаблоне данными, затем инициализируйте и визуализируйте представление страницы, привяжите функцию обновления к узлу, соответствующему каждой инструкции, и добавьте подписчиков для мониторинга данных.Как только данные изменятся, получите уведомление и позвоните функция обновления для обновления данных
Реализовать подписчика «Наблюдатель»:WatcherПодписчикObserverа такжеCompileМост между общением, главная задача подписатьсяObserverЗначение свойства в сообщении изменяется, когда получено сообщение об изменении значения свойства, срабатывает анализаторCompileСоответствующая функция обновления в
Внедрение подписчика «Dep»: подписчик принимает шаблон проектирования «публикация-подписка» для сбора подписчиков.Watcher, для слушателяObserverи подписчикиWatcherЕдиное управление

Как Vue реализует мониторинг объектов и массивов?

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

Может ли Vue обнаружить изменение, присвоив значение непосредственно элементу массива?

из-заJavaScriptпределы,VueНе удалось обнаружить изменения в следующих массивах

когда используешьпоказательПри прямой установке элемента массива, например.vm.items[indexOfItem] = newValue
при изменении массивадлинакогда, напримерvm.items.length = newLength

Чтобы решить первую проблему,VueПредусмотрены следующие методы работы

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

Чтобы решить вторую задачу,VueПредусмотрены следующие методы работы

// Array.prototype.splice
vm.items.splice(newLength - 1)

Расскажите о том, как Vue обнаруживает изменения в массивах?

Основная идея: используется метод перехвата функций и переписывается метод массива (push,pop,unshift,shift···)
VueБудуdataМассив в цепочке прототипов был переписан так, чтобы он указывал на метод прототипа массива, определенный сам по себе.API, вы можете уведомить об обновлении зависимости, если массив содержит ссылочный тип, ссылочный тип в массиве будет снова отслеживаться

Как проходит Vue`vm.$set()`Чтобы решить проблему, когда новые/удаленные свойства объекта не могут ответить?

из-заJavaScriptограничение, Vue не может обнаружить добавление или удаление свойств объекта. Это связано с тем, что Vue инициализирует экземпляр свойствомgetterа такжеsetterВыполняйте захват, поэтому свойства должны существовать в объекте данных, чтобы Vue мог преобразовать их в реактивные данные.

Vueпри условииVue.set(object, propertyName, value) / vm.$set(object, propertyName, value)Чтобы добавить адаптивные свойства к объектам, принцип заключается в следующем:

Если целью является массив, используйте массивspliceреактивный триггер метода
Если целью является объектом, сначала будет определить, существует ли атрибут объекта, и является ли объектом отзывчивым. Наконец, если атрибут должен быть ответственно обработан, он называется вызывающимdefineReactive()метод реактивной обработки (defineReactive()это пара VueObject.defineProperty()вторичная упаковка)

Почему Vue использует асинхронный рендеринг?

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

"Перевод" Каковы недостатки Object.defineProperty? (Почему Vue3.0 начал использовать прокси для реализации отзывчивости)

Object.definePropertyТолько свойства объектов могут быть захвачены, поэтому каждое свойство объекта необходимо обойти, в то время какProxyОбъекты могут быть проксированы напрямую
Object.definePropertyВновь добавленные свойства необходимо наблюдать вручную, т.к.Object.definePropertyПерехват — это атрибут объекта (первая точка), поэтому при добавлении атрибутов нужно снова пройтись по объекту, а затем использовать новые атрибуты.Object.definePropertyугона (именно поэтому мы даемdataПри добавлении свойств к массиву или объекту в$setчтобы убедиться, что представление может быть обновлено)
ProxyВысокая производительность, поддерживает 13 методов перехвата

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

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

Минимальный гарантированный уровень производительности: виртуализация фреймворкаDomНеобходимо адаптироваться к любым операциям, которые могут быть сгенерированы API верхнего уровня, некоторые из егоDomРеализация операции должна быть универсальной, поэтому ее выполнение не является оптимальным, ноDomОперация намного лучше, поэтому гарантируется нижняя граница производительности.
Ручное управление не требуетсяDom: кадр будет основан на виртуальномDomДвусторонняя привязка к данным, помогающая нам обновлять представления и повышать эффективность разработки.
Кроссплатформенность: виртуальнаяDomПо сутиJavaScriptобъект и реальныйDomзависит от платформы, по сравнению с виртуальнымDomУлучшенная кроссплатформенная работа

недостаток:

Невозможно оптимизировать

Принцип реализации виртуального дома?

виртуальныйDomПринцип реализации в основном включает следующие три части:

использоватьJavaScriptОбъекты имитируют реальныеDomдерево, правдаDomАннотация
пройти черезdiffалгоритм для двух виртуальныхDomобъекты для сравнения
пройти черезpatchАлгоритм объединяет два виртуальныхDomразличие объекта, примененное к реальномуDomна дереве

Каков принцип реализации nextTick? Что он делает в Vue

принцип:EventLoopцикл событий
- Правильный процесс заключается в последовательной проверке: Promise.then → функция обратного вызова MutationObserver → setImmediate → setTimeout существует, и если он существует, используйте его, чтобы определить, какой API очередь функций обратного вызова использует для асинхронного выполнения.
- Функция nextTick получаетcallbackКогда он вызывается, вместо того, чтобы вызывать его, помещайте его в глобальную очередь, а при ожидании следующей очереди задач выполняйте функции в этой очереди по одной.
- Эта очередь может быть очередью микрозадач, а страница может быть очередью макрозадач. Первые два API относятся к очереди микрозадач, а последние два API относятся к очереди макрозадач.
Действие: в следующий разdomВыполнить отложенный обратный вызов после завершения цикла обновления и использовать его сразу после изменения данных.nextTick()чтобы получить последнюю обновленную версию Dom

Как реализовано deep: true в часах?

когда пользователь указываетwatchсерединаdeep:true, если текущее отслеживаемое значение является типом массива (типом объекта), каждый элемент в объекте будет оцениваться, а текущийwatcherХранится в зависимости от соответствующего атрибута, поэтому изменения объекта в массиве также будут уведомлять данные об обновлении.

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

Недостатки: Из-за необходимости работать над каждым элементом производительность будет снижена, и не рекомендуется использовать несколько раз.deep:true

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

v-forприоритет надv-if, при совместном использовании этоv-ifдобавить к каждому элементу, повторить для каждогоv-forВ цикле это приведет к потере производительности

Почему данные компонента «перевод» должны быть записаны в функциональной форме

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

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

❗ Немного знаний: new VueКорневой компонент не нужно повторно использовать, поэтому его не нужно возвращать как функцию.

"Перевод" Какова функция клавиши в v-for?

keyдля каждогоvnodeуказать уникальныйid, на том же уровнеvnodeизDiffпроцесс, согласноkeyБыстрое сравнение, чтобы определить, является ли это одним и тем же узлом, и использоватьkeyуникальное поколениеmapЧтобы получить соответствующий узел быстрее, укажите дополнительноkeyПосле этого можно гарантировать точность рендеринга.

Примечание: Не рекомендуется использовать index в качестве значения ключа, подробнее читайте в статье [Сон по утрам]:nuggets.capable/post/684490…

Когда вызывается Vue для каждого жизненного цикла?

beforeCreateПосле инициализации → пример наблюдения за данными (data observer) вызывается перед
created→ Вызывается после создания экземпляра. Здесь экземпляр имеет следующие конфигурации:
- Наблюдение за данными (data observer)
- Операции над свойствами и методами
- watch/eventобратный вызов события
- но еще не здесь$el
beforeMount→ вызывается до начала монтирования, соответствующийrenderфункция вызывается впервые
mounted→$elВновь созданныйvm.$elЗамена и вызов хука после монтажа на экземпляр
beforeUpdate→ Вызывается при обновлении данных, что происходит в виртуальномDOMПеред повторным рендерингом и исправлением
updated→ Виртуализация из-за изменения данныхDOMРерендерить и патчить, после чего будет вызываться хук (этот хук не вызывается при рендеринге на стороне сервера)
beforeDestroy→ Вызывается перед уничтожением экземпляра, когда экземпляр все еще полностью пригоден для использования
destroyed→VueВызывается после уничтожения экземпляра. После вызова этого хукаVueВсе, на что указывает экземпляр, освобождается, все прослушиватели событий удаляются, а все дочерние экземпляры уничтожаются (этот хук не вызывается во время рендеринга на стороне сервера).

Что Vue может делать внутри каждого жизненного цикла?

created→ Экземпляр был создан, потому что это самый ранний триггер, поэтому некоторые данные, запрос ресурсов
mounted→ Экземпляр смонтирован, вы можете сделать некоторыеDOMдействовать
beforeUpdate→ в этом хуке могут быть сделаны дальнейшие изменения состояния, которые не будут запускать дополнительные проходы рендеринга
updated→ может выполняться в зависимости отDOMоперация. Но в большинстве случаев вам следует избегать изменения состояния в этом хуке, так как это может привести к бесконечному циклу обновлений.
destroyed→ Могут выполняться некоторые операции по оптимизации, такие как очистка таймеров, очистка кешей, отвязка событий и т. д.

Какие декларативные хуки жизненного цикла существуют для компонентов Vue?

"beforeCreate", "created", "beforeMount", "mounted", "beforeUpdate", "updated", "beforeDestroy", "destroyed"

❗ Немного знаний:

<keep-alive>Иметь собственную независимую функцию хукаactivated | deactivated

activated→ в бытии<keep-alive>Действует только в обернутом компоненте, используйте этот хук, когда компонент активирован
deactivated→ в бытии<keep-alive>Действует только в обернутом компоненте, используйте этот хук, когда компонент остановлен

В каком порядке выполняются хуки жизненного цикла родительского и дочернего компонентов Vue?

Понимание процесса рендеринга:

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

Итак: «Отец» beforeCreate → «Отец» создан → «Отец» beforeMount → «Сын» beforeCreate → «Сын» создан → «Сын» beforeMount → «Сын» смонтирован → «Отец» смонтирован

Процесс обновления дочернего компонента (в зависимости от того, влияет ли это на родительский компонент)
- Влияет на родительский компонент: «родительский» beforeUpdate → «дочерний» beforeUpdate → «дочерний» обновленный → «родительский» обновленный
- Не влияет на родительский компонент: «дочерний» перед обновлением → «дочерний» обновлен
Процесс обновления родительского компонента (в зависимости от того, затрагивает ли он дочерние компоненты)
- Влияет на дочерние компоненты: «родительский» beforeUpdate → «дочерний» beforeUpdate → «дочерний» обновленный → «родительский» обновленный
- Не влияет на дочерние компоненты: «родительский» перед обновлением → «родительский» обновлен
процесс разрушения
- «Отец» beforeDestroy → «Сын» beforeDestroy → «Сын» уничтожен → «Отец» уничтожен

Может ли родительский компонент прослушивать жизненный цикл дочернего компонента?

Например, есть родительский компонент Parent и дочерний компонент Child, если родительский компонент слушает монтирование дочернего компонента.mountedпросто выполните некоторую логическую обработку,

метод первый

// Parent.vue
<Child @mounted='doSomething' />

// Child.vue
mounted(){
    this.$emit('mounted')
}

Способ 2 (проще - слушать через @hook)

// Parent.vue
<Child @hook:mounted='doSomething' />

#   @hook可以监听其他生命周期

Как понять односторонний поток данных vue

существуетvue, родительский компонент может передатьpropпередавать данные дочерним компонентам, но этоpropОн может быть изменен только родительским компонентом, если изменен дочерний компонент, будет выдана ошибка.
Если это дочерний компонент, который хочет изменить данные, он может передать только$emitСобытия отправляются дочерними компонентами и изменяются родительскими компонентами, получающими события.

Почему дочерние компоненты не могут изменить PROP, прошедший родительский компонент? (Почему Vue защищает односторонний поток данных)

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

Какие существуют способы связи между компонентами?

Взаимодействие компонентов родитель-потомок
- props / event
- $parent / $children
- ref
- provide / inject
- .sync
Коммуникация между компонентами, не являющимися родительскими и дочерними
- eventBus
- через корневой экземпляр$root
- vuex
- $attr / $listeners
- provide / inject

❗ Немного знаний:о.syncиспользование

假设有一个组件 comp

<comp :foo.sync="bar"></comp>

传递foo值并用sync修饰，会被扩展成

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件comp需要更新foo的值时，它需要显示地触发一个更新事件

this.$emit('update:foo', newValue)

Давайте поговорим о динамических компонентах Vue.

Несколько компонентов переключают компоненты через одну и ту же точку монтирования,isЗначение которого является названием компонента, то какой компонент будет отображаться на странице

<div :is='xxx'></div>

Расскажите об использовании рекурсивных компонентов

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

Прежде всего, нам нужно знать, что, поскольку это рекурсивный компонент, должно быть конечное условие, иначе это приведет к тому, что компонент будет использоваться в бесконечном цикле и в конечном итоге появитсяmax stack size exceededошибка, которая является переполнением стека. Итак, мы должны использоватьv-if = 'false'как конечное условие рекурсивного компонента, когда он встречаетv-if = 'false', компонент больше не будет отображаться

Как реализуется синтаксическая сахарная v-модель пользовательских компонентов? (Как v-model реализует двустороннюю привязку)

v-modelСуть в томv-bindа такжеv-onСинтаксический сахар для создания двусторонних привязок к элементам управления формы или компонентам (просто синтаксический сахар, различающий реактивные данные)
Принцип: привяжите vlue к элементам формы и прослушивайте входные события.

<input v-model='searchText'>

等价于

<input
    v-bind:value='searchText'
    v-on:input='searchText = $event.target.value'>

использовать на компонентеv-model, по умолчанию будет привязка компонента с именемvalueизpropи назвалinputмероприятие

В чем разница между Vuex и чистым глобальным объектом?

vuexЕсть два основных отличия от глобальных объектов:

vuexХранилище состояний является реактивным. когдаvueкомпоненты изstoreПри чтении статуса вstoreЕсли состояние компонента изменится, соответствующий компонент также будет эффективно обновлен.
не может быть изменен напрямуюstoreсостояние, изменениеstoreЕдинственный способ сделать это - явно зафиксироватьmutation(commit).这样使得我们可以方便地跟踪每一个状态的变化

«Перевод» Почему нельзя выполнять асинхронные операции в мутации vuex?

vuexЕдинственный способ для всех обновлений статуса - зафиксироватьmutation, асинхронные операции должны проходитьactionпредставитьmutation(dispatch). Это позволяет нам легко отслеживать изменение каждого состояния, чтобы мы могли реализовать некоторые инструменты, которые помогут нам лучше использоватьvuex

каждыйmutationПосле выполнения соответственно будет получено новое изменение состояния, так чтоdevtoolsВы можете сделать снимок и сохранить его, и тогда вы сможете добитьсяtime-travel.

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

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

v-ifЯ не обращаюсь к узлу текущей инструкции, если условие не установлено.Domэлемент, прослушиватели событий и подкомпоненты условного блока будут уничтожены и перестроены в процессе переключения
v-showпросто на основеcssСделайте переключатель, который будет отображаться независимо от условия (переключательdisplay:block | none)

Так:v-ifНакладные расходы на коммутацию велики, иv-showНакладные расходы на инициализацию велики, поэтому, когда вам нужно часто переключаться между отображением и скрытиемDomэлемент, использованиеv-showБолее уместно использовать, когда переключение редко выполняется после рендеринга.v-ifболее подходящий

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

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

(цитата мечтает на рассвете)Фактическиcomputedбудет иметь свой собственныйwatcher, который имеетdirtyАтрибут для определения необходимости пересчета или повторного использования вычисленного значения непосредственно из предыдущего значения, например, в этом примере:

computed: {
    sum() {
        return this.count + 1
    }
}

существуетsumРеактивные свойства считываются при первой оценкеcount, который собирает эти реактивные данные как зависимость. и вычисляет значение для сохранения в своем собственномvalueвверх, положитьdirtyУстановите значение false, а затем снова получите к нему доступ в шаблоне.sumПросто верните желаемое значение напрямуюvalue, без переоценки.
После изменения счетчика наблюдатель, соответствующий sum, будет уведомлен о необходимости установить для свойства dirty значение true, что эквивалентно включению переключателя повторной оценки. Это легко понять, только когда количество изменяется, сумма должна быть переоценена.
Затем при следующем доступе к this.sum в шаблоне функция sum будет вызываться снова для оценки, а для dirty снова устанавливается значение false, ожидая следующего открытия.

Так:computedа такжеwatchРазница заключается в использовании,computedОн подходит для шаблонного рендеринга.Если вам нужно получить динамические значения через зависимости, вы можете использовать вычисляемые свойства. И если вы хотите выполнять бизнес-логику при прослушивании изменений значения, используйтеwatch

Какова роль v-html в Vue? Какие проблемы это может вызвать?

v-htmlМожет использоваться для идентификации HTML-тегов и их отображения.

вызвать проблему:Динамически отображать произвольно на веб-сайтеHtml, что легко может привести кXssатаки, поэтому его можно использовать только на доверенном контентеv-html, и никогда не может быть использован для контента, отправленного пользователями.

Какова роль keep-alive в vue?

завернут в<keep-alive>В компоненте будет сохраняться состояние его компонента при переключении, чтобы он не разрушился, предотвращая многократный рендеринг

Обычно используется в сочетании с маршрутизацией и динамическими компонентами для кэширования компонентов.
keep-aliveимеет два независимых жизненных цикла (activated | deactivated),Сделатьkeep-aliveОбернутый компонент не уничтожается при переключении, а кэшируется в памяти и выполняетсяdeactivatedХук, память захватывается при переключении обратно на компонент и выполняется после рендерингаactivatedкрюк
поставкаincludeа такжеexcludeсвойства, оба поддерживают строки или регулярные выражения
- includeУказывает, что будут кэшироваться только компоненты, имена которых совпадают.
- excludeУказывает, что любой компонент, имя которого совпадает, не будет кэшироваться
- excludeприоритет надinclude

Как добавить пользовательскую команду?

Создание локальных директив

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                //  toDo
            }
        }
    }
})

Создать глобальную директиву

Vue.directive('dir2', {
    inserted(el) {
        // inserted 表示元素插入时
        // toDo
    }
})

Использование инструкции

<div id="app">
    <div :dir1='..'></div>
</div>

Как настроить фильтры

Создать локальный фильтр

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    filters: {
        // 指令名称
        newfilter:function(value){
            // toDo
        }
    }
})

Создать глобальный фильтр

Vue.filter('newfilter', function (value) {
    // toDo
})

использование фильтра

<div>{{xxx | newfilter}}</div>

Каковы общие модификаторы в vue и как они используются?

.prevent: Перехватывать события по умолчанию
.passive: Не перехватывать события по умолчанию
.stop: Предотвращает появление всплывающих окон событий.
.self: срабатывает, когда событие происходит в элементе, а не в дочернем элементе
.capture: прослушиватель событий, который будет вызываться при возникновении события

Как класс/стиль динамически связаны

Класс может быть динамически связан с помощью синтаксиса объекта и синтаксиса массива.

синтаксис объекта

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: false
}

синтаксис массива

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Стиль также может быть динамически связан с помощью синтаксиса объекта и синтаксиса массива.

синтаксис объекта

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

синтаксис массива

<div v-bind:style="[styleColor, styleSize]"></div>

data: {
  styleColor: {
     color: 'red'
   },
  styleSize:{
     fontSize:'23px'
  }
}

Расскажите о своем понимании одиночной страницы SPA и ее преимуществах и недостатках?

SPA(singlg-page application)Загружать соответствующий только при инициализации веб-страницыHtml,JavaScript,Css, как только страница загрузится,SPAСтраница не будет перезагружаться или переходить из-за действий пользователя, вместо этого она будет реализована с использованием механизма маршрутизации.Htmlтрансформация контента,UIВзаимодействие с пользователем, избегание перезагрузки страницы

преимущество:
- Хороший пользовательский интерфейс, быстрая скорость загрузки, изменение содержимого не требует перезагрузки всей страницы, что позволяет избежать ненужных переходов и повторного рендеринга.
- SPA относительно меньше нагружает сервер
- Обязанности front-end и back-end разделены, архитектура стала понятнее, front-end отвечает за логику взаимодействия, а back-end — за обработку данных
недостаток:
- Загрузка в первый раз занимает много времени (чтобы реализовать функцию и эффект отображения одностраничного веб-приложения, необходимоJavaScript,CssЕдиная загрузка, некоторые страницы загружаются по требованию)
- Поскольку одностраничное приложение отображает весь контент на одной странице, функции браузера вперед и назад использовать нельзя, и для всех переключений страниц необходимо установить управление стеком само по себе.
- Не подходит для SEO-оптимизации

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

существует<style>написать на этикеткеscopedТолько что

"О роутере"

Что касается маршрутизации, в чем разница между маршрутом и маршрутизатором?

routeПредставляет информационные объекты маршрутизации, включаяpath,params,hash,query,fullPath,matched,nameРавные параметры информации о маршрутизации
routerПредставляет объект экземпляра маршрутизации, включая методы перехода маршрутизации, функции подключения и т. д.

"Перевод" Что такое навигационные сторожа в vue-Router

«Глобальный предварительный крючок»:beforeEach,beforeResolve,afterEach
«Эксклюзивная защита маршрутизации»:beforeEnter
«Внутренняя защита компонента»:beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave

Процесс разбора навигации:

Навигация срабатывает
Вызывается в деактивированном компонентеbeforeRouteLeaveпокинуть охрану
глобальный вызовbeforeEachсторожить
Вызывается в повторно используемом компонентеbeforeRouteUpdateсторожить
Вызывается в конфигурации маршрутизацииbeforeEnterсторожить
Анализ компонентов асинхронной маршрутизации
Вызывается в активированном компонентеbeforeRouteEnterсторожить
глобальный вызовbeforeResolveсторожить
Навигация подтверждена
глобальный вызовafterEachсторожить
вызыватьDomвозобновить
вызов с созданным экземпляромbeforeRouteEnterпройти к охранникуnextПерезвоните

"Перевод" В чем разница между режимами хэш/история в vue-Router?

hashрежим будет вurl'#' отображается наhistoryрежим нет
При обновлении страницы,hashСхема может быть загружена нормально вhashстраница, соответствующая значению,historyЕсли режим не обработан, будет возвращено 404. Как правило, серверу необходимо настроить все страницы для перенаправления на маршрут домашней страницы.
Совместимость,hashРежим может поддерживать более ранние версии браузеров и IE.

«Перевод» Как реализован хеш/история в vue-router?

hashмодель
- #ПозадиhashИзменение значения не приведет к тому, что браузер отправит запрос на сервер, если браузер не отправит запрос, он не обновит страницу.hashchangeсобытия могут быть известныhashЧто изменилось. согласно сhashИзменения для достижения частичного обновления страницы
historyмодель
- historyРеализация шаблона в основномHtml5Два API, опубликованные стандартом (pushStateа такжеreplaceState), эти два API могут менятьсяurl, но запрос не будет отправлен, так что прослушиваниеurlизменения для достижения локальных обновлений

Как определить динамическую маршрутизацию vue-router? Как получить переданное значение

Создание динамических маршрутов, в основном с использованиемpathпроцедура свойства, используйте параметры динамического пути, начиная с двоеточия

{
    path:'/details/:id',
    name:'Details',
    components:Details
}

# 访问`details`前缀下的路径，例如`details/1`，`details/2`等，都会映射到`Details`这个组件

при сопоставлении с/detailsКогда используется указанный ниже маршрут, значение параметра будет установлено наthis.$route.paramsДалее можно получить динамические параметры этого свойства

this.$route.params.id

Каковы параметры прохода Vue-Router?

пройти черезparams
- использовать толькоname,Не работаетpath
- Параметры не отображаются вurlначальство
- Принудительное обновление браузера очистит параметры
пройти черезquery
- использовать толькоpath,Не работаетname
- nameможно использоватьpathдорожка
- параметры будут отображаться вurlначальство
- Обновление браузера не очищает параметры

«О Вексе»

Каковы плюсы и минусы vuex?

преимущество
- Решенный обмен сообщениями для компонентов, не являющихся родительскими и дочерними (хранить данные вstateсередина)
- уменьшилсяAjaxколичество запросов, некоторые сценарии могут быть извлечены напрямую из памятиStateПолучать
недостаток
- обновите браузер,vuexсерединаStateвернется в исходное состояние

Какими свойствами обладает vuex?

State:vuexосновные данные для хранения переменных
Getter: из основных данныхstateпроизводные данные, эквивалентныеstateвычисленные свойства
Mutation: метод отправки обновленных данных, который должен быть синхронным (использовать асинхронныйaction). каждыйmutationоба имеют строковый тип события (type) и функцию обратного вызова (handler)
Action:а такжеmutationФункции примерно одинаковые, разница в том, что
- actionпредставленоmutation, вместо того, чтобы напрямую менять состояние
- actionМожет содержать произвольные асинхронные операции
Module: Модульныйvuex, что позволяет каждому модулю иметь свой собственныйstate,mutation,action,getter, делая структуру понятной и простой в управлении

Каковы характеристики состояния в vuex?

vuexЭто склад, и на складе много объектов, среди которыхstateявляется источником данных
stateХранящиеся в нем данные реагируют,Vueкомпоненты изstoreчитать данные, еслиstoreЕсли данные в данных изменятся, компоненты, которые зависят от этих данных, также обновят данные.
это проходитmapStateпринять глобальныйstateа такжеgettersсопоставляется с текущим компонентомcomputedв вычисляемом свойстве

Каковы характеристики геттеров в vuex?

gettersдаstateвыполнять вычислительные операции, которые можно рассматривать какstoreизcomputedвычисляемое свойство
Хотя в компонентах также можно вычислять свойства,gettersМожет быть повторно использован между несколькими компонентами
Если состояние используется только в одном компоненте, его можно опустить.getters

Должен ли код для Ajax-запросов в Vue быть написан в методах компонента или в действиях vuex?

Если запрошенные данные не используются другими компонентами и используются только внутри запрошенного компонента, нет необходимости помещать их вvuexизstateвнутри
Если повторно используется в другом месте, вы можете поместить запрос вactionЭто удобно для повторного использования, если вам не нужно повторно использовать этот запрос, напишите его прямо вVueфайл будет удобнее

"О ССР"

Вы когда-нибудь использовали SSR? Расскажите о своем понимании SSR

Vue.jsэто фреймворк для создания клиентских приложений, по умолчанию может выводить в браузереVueкомпоненты, для созданияDomи операцияDom. Однако также возможно отобразить тот же компонент, что и на сервере.Htmlстроки, отправить их прямо в браузер и, наконец, эти статические тегиактивацияДля полностью интерактивных приложений на клиенте

который:SSRпримерно означаетvueОтрисовка этикетки целиком на стороне клиентаhtmlРабота над фрагментом передается серверу для завершения, и сервер формируетHtmlФрагмент возвращается непосредственно во внешний интерфейс, этот процесс называетсяSSR(рендеринг на стороне сервера)

Преимущества серверного рендеринга SSR:

Лучшее SEO: благодаряSPAСодержание страницыAjaxfetch, и сканеры поисковых систем не ждутAjaxПосле асинхронного завершения захватите содержимое страницы, поэтому вSPAMedium не сканирует страницуAjaxполученный контент;SSRОн напрямую возвращается сервером на отображаемую страницу (данные уже включены в страницу), поэтому сканер поисковой системы может сканировать отображаемую страницу.
Более быстрые события поступления контента (более быстрая загрузка выше сгиба):SPAбуду ждать всехVueсоставленоJsПосле загрузки файлов начинается рендеринг страницы, а загрузка файла занимает определенное время, поэтому рендеринг первого экрана занимает определенное время; иSSRСтраница отображается непосредственно сервером и возвращается на экран напрямую, не дожидаясь загрузки.JsЗатем файл визуализируется, поэтомуSSRПолучите более быстрое время доставки контента

Недостатки рендеринга SSR на стороне сервера:

Дополнительные условия разработки: например, рендеринг на стороне сервера поддерживает толькоbeforeCreate,createdПерехватчики жизненного цикла, из-за которых некоторые внешние библиотеки расширений требуют специальной обработки для запуска в приложениях, отображаемых на сервере, а также в случае полностью статических одностраничных приложений, которые можно развернуть на любом статическом файловом сервере.SPAразличные серверные приложения должны находиться вNodeJsбегать в окружении
Больше нагрузки на сервер: вNodeJsОтрисовка полного приложения вserverЗаймите больше ресурсов ЦП