Краткое изложение вопросов Vue для собеседования в руководстве по фронтенд-интервью

Vue.js

1. Каковы преимущества фреймворка Vue?

(1)легкий каркас: сосредоточиться только на слое просмотра, размер которого составляет всего несколько десятков килобайт;
(2)Легко учить: документ беглый и ясный, а синтаксис простой;
(3)двусторонняя привязка данных, Изолированное представление структуры данных, только данные для завершения операции по обновлению соответствующей страницы;
(4)составнойРазработка: Структура проекта понятна, ведение кода удобно;
(5)виртуальный DOMЗагрузка узлов HTML, работающая эффективно.

2. Что такое MVVM?

МВВМ этоModel-View-ModelViewАббревиатура , — это модель, созданная на основе шаблона MVC.Шаблоны проектирования.
    Модель представляет слой данных, отвечающий за хранение бизнес-данных;
    Представление представляет слой представления, отвечающий за отображение данных на странице;
    ViewModel Да, роль заключается в синхронизации между представлением и модельюассоциация, ядром которого реализуется ассоциация синхронизацииDOM Listenersа такжеData Bindingsдва инструмента.DOMListenersИнструмент используется для отслеживания изменений DOM в представлении и выборочно передает их в модель;Data BindingsИнструмент используется для прослушивания изменений в данных модели и обновления их до представления.
image.png

3. Какие есть методы передачи значений между компонентами в Vue?

    родительский компонент передает значение дочернему компоненту:

(1) Родительский компонент привязан к метке дочернего компонентапользовательские свойства;
(2) Подкомпоненты принимаются через атрибут props.

//父组件 
export default { components:{ Child } }
<Child :name="123" />

//子组件 
export default { props: ["name"]//此处亦可指定数据类型 }

    Дочерние компоненты передают значения родительским компонентам:

(1) Привяжите родительский компонент к метке дочернего компонентапользовательское событие;
(2) Подкомпоненты проходятthis.$emit()Метод запускает пользовательское событие и передает значение родительскому компоненту.

//父组件 
export default { components:{ Child }, data:{ name:"123" }, methods:{ changeName(value){
this.name = value } } }
<Child @changeName="changeName" />

//子组件 
export default { methods:{ changeParentName:(value)=>{ this.$emit("changeName","456") } } }
<button @click="changeParentName">改变父组件的name</button>

    Передать значения между родственными компонентами:

(1) Обычно передается родительскому компоненту, а затем распространяется родительским компонентом (повышение статуса);
(2) использоватьVuex;
(3) Использоватьавтобус событие автобус.

let bus = new Vue() 
A组件：methods :{ 函数{bus.$emit(‘自定义事件名’，数据)} //发送 
B组件：created(){bus.$on(‘A发送过来的自定义事件名’，函数)} //进行数据接收

4. Каковы общие функции ловушек жизненного цикла в Vue?

    Всего в Vue есть восемь общих функций хуков жизненного цикла:

(1) Этап создания
        BeforeCreate: после инициализации экземпляра Vue функция создаст компоненты, отслеживает данные (наблюдатель данных),watch/eventВызывается перед конфигурацией события. недоступно в данный моментdata,ref, в объекте экземпляра Vue есть только функции жизненного цикла и некоторые события по умолчанию.  Created: эта функция вызывается после создания компонента Vue. На этом мониторинг данных и настройка событий завершены.dataОбъект доступен, но компонент еще не преобразован в HTML-шаблон,refещеundefined,$elПока недоступно.

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

(2) Этап монтажа
        BeforeMount: Эта функция вызывается перед монтированием компонента, в это время компиляция HTML-шаблона завершена и виртуальный DOM уже существует.$elдоступен, ноrefВсе еще недоступно.

Как правило, на этом этапе выполняется первоначальная операция сбора данных.

        Mounted: Эта функция вызывается после монтирования компонента. В настоящее время$elэлемент былvm.$elзаменять,refВозможна операция.

Как правило, на этом этапе выполняется операция отправки асинхронного запроса. Mounted не гарантирует, что все дочерние компоненты также будут смонтированы вместе. Если вы хотите дождаться рендеринга всего вида, вы можете использовать внутри смонтированныйvm.$nextTick.

(3) Этап обновления
        BeforeUpdate: эта функция вызывается перед обновлением данных и исправлением виртуального DOM.

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

        Updated: эта функция вызывается после обновления данных и исправления виртуального DOM.

(4) Стадия разгрузки
        BeforeDestory: Эта функция вызывается перед уничтожением экземпляра, когда экземпляр полностью доступен,refвсе еще существует.

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

        Destroyed: эта функция вызывается после уничтожения экземпляра.В это время все инструкции в Vue были несвязаны, а все прослушиватели событий удалены.refСтатусundefined.

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

Также есть две функции ловушки для компонента keep-alive:
        activated: существованиеkeep-aliveВызывается при активации кэшированного компонента.
        deactivated: существованиеkeep-aliveВызывается при деактивации кэшированного компонента.

Также есть функция захвата обработки ошибок:
        errorCaptured: Вызывается при обнаружении ошибки компонента-потомка.微信图片_20201017092359.png

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

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

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

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

7. В чем разница между вычислением и просмотром в Vue?

    Расчетное свойство вычислено:
(1)Кэш поддержки, расчетная функция будет пересчитываться только при изменении зависимых данных;
(2) В пределах вычисляемого свойстваАсинхронные операции не поддерживаются;
(3) В функции расчета атрибутау обоих есть шанс(по умолчанию есть, получить вычисляемое свойство)и установить(ручное добавление, установка вычисляемых свойств) метод;
(4) Вычисляемые свойства автоматически отслеживают изменения зависимых значений для динамического возврата содержимого.

    слушать имущество смотреть:
(1)кеш не поддерживается, пока данные изменяются, будет выполняться функция слушателя;
(2) В атрибуте прослушиванияПоддержка асинхронных операций;
(3) Слушайте значение атрибутаМожет быть объектом, получать обратный вызов обработчика, три свойства глубокого, немедленного;
(3) Мониторинг — это процесс, когда отслеживаемое значение изменяется, может быть запущен обратный вызов, исделать что-нибудь еще.

watch: { 
	obj: { 
    	//handler接收两个参数（newVal：新值，oldVal：旧值 
    	handler: function(newVal, oldVal){ 
    		console.log(newVal); 
		}, 
	deep: true,//设置为true时会监听对象内部值的变化； 
	immediate: true//设置为true时会立即以表达式的当前值触发回调； 
	} 
}

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

//优化前 
created(){ 
	this.fetchPostList() 
	}, 
watch: { 
	searchInputValue(){ this.fetchPostList() } 
	}
//优化后 
watch: { 
	searchInputValue:{ handler: 'fetchPostList', immediate: true } 
	}

8. Что такое $nextTick?

Vue реализует отзывчивость вместо обновления DOM сразу после появления данных, используяvm.$nextTickзаключается в выполнении отложенного обратного вызова сразу после окончания следующего цикла обновления DOM. используется после изменения данных, затемОбновленный DOM можно получить в обратном вызове.

9. Какова функция клавиши в v-for?

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

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

Vue принимаетПерехват данных + модель публикации по подпискеРазличные двунаправленные привязки. пройти черезObject.defineProperty()метод для компонентаdataДобавьте методы get и set к каждому свойству .При изменении данных запускается соответствующая функция обратного вызова прослушивателя в наборе, и информация об изменении публикуется подписчикам. В основном это следующие шаги:
(1) Когда компонент инициализирован:
А. СоздайтеОбъект dep выступает в роли наблюдателя (полагаясь на носитель сбора, подписки и публикации);
B. проходObject.defineProperty()Метод добавляет методы геттера и сеттера к атрибутам в данных и атрибутам объектов вложенных атрибутов, при вызове геттера переходим в dep для регистрации функции. Когда сеттер вызывается, он уведомляется о выполнении только что зарегистрированной функции.
(2) Когда компонент смонтирован:
        a. compileРазберите директиву шаблона и замените в ней переменные на данные. Затем инициализируйте представление страницы рендеринга и привяжите функцию обновления и функцию мониторинга к узлу, соответствующему каждой инструкции. Последующие изменения данных будут обновлять страницу. При изменении страницы информация об изменении будет выпущена соответствующим образом;
б. Компонент также определяеткласс наблюдателя как подписчик, наблюдатель можно рассматривать как мост между dep и компонентами. Он добавит себя в dep при создании экземпляра, и в то же время у него есть метод обновления.Когда он получит уведомление об изменении от dep, он вызовет свой собственный метод обновления, вызывая соответствующую функцию в компиляции для завершения обновления.

data.png

11. Как динамически обновлять значение объекта или массива?

потому чтоObject.defineProperty()Из-за ограничения Vue Vue не может отслеживать изменение значения свойства внутри объекта или массива, поэтому, когда значение двух вышеуказанных типов данных устанавливается напрямую, страница не будет обновляться в режиме реального времени. В этот момент вы можете пройтиthis.$setметод решения:

//this.$set(要改变的数组/对象，要改变的位置/key，要改成的value) this.$set(this.arr, 0, "OBKoro1");
// 改变数组 this.$set(this.obj, "c", "OBKoro1"); // 改变对象

Обновление данных, вызванное собственным методом массива, можно отслеживать с помощью Vue. Например, splice(), push(), pop() и так далее.


12. Какие обычно используются модификаторы событий?

.stop: перестать пузыриться;
.prevent: предотвратить поведение по умолчанию;
.self: срабатывает только сам элемент привязки;
.once: срабатывает только один раз..

13. Как Vue получает элементы DOM?

Сначала установите атрибут ref для элемента label, а затем передайтеthis.$refs.属性值Получать.

<div ref="test"></div>

const dom = this.$refs.test

14. Как v-on связывает несколько событий?

Вы можете связать несколько событий, передав объект через v-on:

<!--单事件绑定-->
<input type="text" @click="onClick">
<!--多事件绑定-->
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur }">

15. Как решить проблему мерцания страницы инициализации Vue?

Эта проблема возникает из-за того, что отображением DOM на странице нельзя управлять до тех пор, пока код Vue не будет проанализирован, поэтому код, такой как строки шаблона, будет виден.
Решение состоит в том, чтобы добавить правило v-cloak в код css и добавить атрибут v-cloak в тег для компиляции:

[v-cloak] { display: none; }

<div v-cloak>
  {{ message }}
</div>

16. Как Vue очищает кеш браузера?

(1) Когда проект упакован, к каждому упакованному файлу добавляется хеш-значение, обычно в конце файла добавляется метка времени;
(2) Добавьте метатег в html-файл и установите для атрибута содержимого значениеno-cache;
(3) Запретить настройки кэша на задневшем сервере.

17. Какие существуют режимы маршрутизации Vue-router?

Обычно есть два режима:
(1)хэш-режим: при изменении следующего хэш-значения браузер не будет ни отправлять запрос на сервер, ни обновлять браузер, каждый раз при изменении хеш-значения будет инициироваться событие hashchange.
(2)История режима: Воспользуйтесь преимуществами новых методов pushState() и replaceState() в HTML5. Эти два метода применяются к стеку истории браузера и, основываясь на существующих back, forward и go, обеспечивают функцию изменения истории. Просто когда они выполняют модификацию, хотя текущий URL-адрес меняется, браузер не сразу отправляет запрос на серверную часть.

18. Каково примерное назначение каждой папки и файла в проекте Vue-cli?

(1)папка сборки: Храните соответствующие файлы конфигурации и скрипты webpack, которые обычно используются для настройки файлов less, babel и webpack.base.config.js в реальной разработке.
(2)папка конфигурации: файл config.js (index.js) в этой папке обычно используется для настройки номера порта среды разработки, включения горячей загрузки или установки относительного пути к статическим ресурсам в производственной среде, включения сжатия gzip. , и команда npm run build для упаковки и создания имен и путей статических ресурсов и т. д.
(3)папка node_modules: хранить различные зависимости среды разработки и производственной среды, загруженные командой npm install.
(4)папка src: Храните исходный код компонента, ресурсы стиля изображения, файлы ввода, конфигурацию маршрутизации и т. д.

19. В чем разница между активами и статическими папками в проекте Vue-cli?

Обе папки используются для хранения статических файлов ресурсов, используемых в проекте. Разница в следующем:
** в активахфайл при запуске npm run buildБудет запаковано**, короче, будет сжато, форматирование кода и т.д. После упаковки он также будет помещен в статику.статическийдокументыне будет упакован.

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

20. Что такое Vuex? Какие виды свойств существуют?

Vuex разработан для VueИнструмент управления состоянием, который использует централизованное хранилище для управления состоянием всех компонентов в Vue.

(1)stateАтрибуты:основные данные;
(2)gettersсобственность: от государствапроизводные данные;
(3)mutationАтрибут: **Единственный способ обновить данные в хранилище**, он получает функцию обратного вызова с состоянием в качестве первого параметра;

const store = new Vuex.Store({
  state: {
    count: 1,
  },
  mutations: {
    increment(state) {
      // 变更状态
      state.count++;
    },
  },
});

(4)атрибут действия:Совершить мутацию для изменения состояния,вМожет содержать асинхронные операции;

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment2(context) {
      context.commit('increment');
    },
    fun(context) {
      context.dispatch('increment2');
    },
  },
});

(5)атрибут модуля: используется для хранениясегментацияв разныемодуль.

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

Портал серии руководств по предварительным собеседованиям:

Краткое изложение вопросов JS-интервью в руководстве по фронтенд-интервью

Краткое изложение вопросов HTML-интервью в руководстве по интерфейсному собеседованию

Краткое изложение вопросов CSS-интервью в руководстве по фронтенд-интервью

Категории