1. Введение в Vue.js
Vue.js — это легкая, высокопроизводительная компонентная библиотека MVVM с очень простым в использовании API;
Vue.js — это библиотека для создания веб-интерфейсов, управляемых данными.
Vue.js — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других тяжеловесных фреймворков, Vue использует инкрементальную разработку снизу вверх. Основная библиотека Vue ориентирована только на уровень представления, и ее очень легко изучить и интегрировать с другими библиотеками или существующими проектами. С другой стороны, Vue полностью способен управлять сложными одностраничными приложениями, разработанными с использованием однофайловых компонентов и библиотек, поддерживаемых экосистемой Vue. Управляемая данными + компонентная фронтенд-разработка.
Вкратце: Vue.js — это прогрессивный фреймворк для создания веб-интерфейсов, управляемых данными. Цель Vue.js — реализовать реактивную привязку данных и составные компоненты представления с максимально простым API. Ядром является отзывчивая система привязки данных.
2. Что такое мввм?
MVVM — это сокращение от Model-View-ViewModel. mvvm - это дизайнерская мысль. Уровень модели представляет собой модель данных, в модели также может быть определена бизнес-логика модификации и работы с данными; представление представляет собой компонент пользовательского интерфейса, который отвечает за преобразование модели данных в пользовательский интерфейс для отображения, а модель представления представляет собой объект, который синхронизирует представление и модель.
3. Кратко опишите принцип адаптивности Vue
Когда создается экземпляр Vue, vue перебирает свойства параметра данных, превращает их в геттеры/сеттеры с помощью Object.defineProperty и отслеживает внутренние зависимости, уведомляя об изменениях при доступе к свойствам и их изменении. У каждого экземпляра компонента есть соответствующий экземпляр программы-наблюдателя, который записывает свойство как зависимость во время процесса рендеринга компонента, а затем уведомляет наблюдателя о необходимости пересчета при вызове установщика зависимости, тем самым вызывая обновление связанных с ним компонентов.
4. Возможности Vue.js
Кратко: страница состоит из шаблона HTML + данных Json + экземпляра Vue.
Управляемый данными: автоматически вычисляемые свойства и отслеживание зависимых шаблонных выражений
Компонентизация: создавайте страницы с повторно используемыми несвязанными компонентами.
Легкий: небольшой объем кода, отсутствие зависимостей от других библиотек.
Быстро: точные и эффективные массовые обновления DOM
Дружественный шаблон: его можно установить с помощью npm, bower и других методов, и его легко интегрировать.
5. Что такое ссс?
Предварительно обработайте CSS, напишите текущую функцию CSS, определите переменные и вложите их.
6. Понимание жизненного цикла vue?
Всего 8 этапов делятся на этапы до/после создания, до/после загрузки, до/после обновления и до/после уничтожения.
До/после создания: на этапе beforeCreate элемент монтирования el экземпляра vue еще не создан. До/после загрузки: на этапе beforeMount $el и данные экземпляра vue инициализируются, но до монтирования они все еще являются виртуальными узлами dom, а data.message не был заменен. На этапе монтирования экземпляр vue монтируется, и data.message успешно обрабатывается. До/после обновления: при изменении данных запускаются методы beforeUpdate и updated. До/после уничтожения: после выполнения метода destroy изменения в данных больше не будут запускать периодическую функцию, указывая на то, что экземпляр vue был освобожден от отслеживания событий и привязки к dom в это время, но структура dom все еще существует.
7. Почему данные в vue должны быть функцией?
Объект является ссылочным типом.При повторном использовании компонента, поскольку все объекты данных указывают на один и тот же объект данных, когда данные изменяются в одном компоненте, данные в других повторно используемых компонентах будут изменены одновременно; и используется функция, возвращающая объект, поскольку каждый второй возвращает новый объект (экземпляр объекта), а ссылочный адрес отличается, поэтому этой проблемы не возникнет.
8. Активный класс является свойством какого компонента?
Компонент router-link модуля vue-router.
9. Какие навигационные крючки есть у vue-router?
три.
Одним из них является глобальный навигационный хук: router.beforeEach(to, from, next), который используется для оценки и перехвата перед прыжком.
Второе: зацепки в компонентах;
Третий тип: отдельная маршрутизация эксклюзивных компонентов
10. Назовите как минимум 4 директивы Vue и их использование?
v-if: определить, следует ли скрывать; v-for: цикл данных; v-bind: класс: привязать атрибут; v-модель: реализовать двустороннюю привязку
11. Что такое vue-loader? Каковы преимущества его использования?
Загрузчик, который анализирует файлы .vue и преобразует template/js/style в модули js.
12. Скажите, пожалуйста, использование каждой папки и файла в каталоге src в проекте vue.cli?
Папка assets предназначена для статических ресурсов;
компоненты - поставить компоненты;
маршрутизатор должен определить конфигурацию, связанную с маршрутизацией;
вид на вид;
app.vue — главный компонент приложения;
main.js — это входной файл
13. Разница между вычисляемыми свойствами и часами
Когда мы используем vue, мы должны использовать вычисляемые свойства и наблюдать за ними.
Вычисляемые вычисляемые свойства используются для декларативного описания того, как значение зависит от других значений. Когда вы привязываете данные к вычисляемому свойству в шаблоне, Vue будет обновлять DOM всякий раз, когда любое значение, от которого оно зависит, вызывает изменение вычисляемого свойства. Это мощная функция, которая делает ваш код более декларативным, управляемым данными и более простым в обслуживании.
Часы отслеживают определяемые вами переменные, и когда значение определяемых вами переменных изменяется, вызывается соответствующий метод. Просто напишите имя выражения в div, напишите число и фамилию, имя в данных, при изменении значения числа в часах будет вызван метод числа, а формальный параметр в методе соответствует новому значению числа и старое значение и вычисляемое свойство, которое вычисляет значение, зависящее от имени, оно не может вычислять переменные, которые были определены в данных.
14.prop проверка и значения по умолчанию
Когда родительский компонент передает значение дочернему компоненту, во избежание ненужных ошибок мы можем установить тип значения свойства, чтобы при передаче родительским компонентом значения дочернему компоненту оно было более точным. может передавать число, логическое значение, массив, объект и все свойства объекта. Компоненты могут указывать требования проверки для реквизита. Если требования проверки не указаны, Vue выдаст предупреждение, например, о передаче ряда данных типа, использует defaultt для установки значения по умолчанию и выдаст предупреждение, если проверка не пройдена.
props: {
visible: {
default: true,
type: Boolean,
required: true
},
},
15. Коммуникация компонентов vue
отец, проходящий мимо сына
Родитель: имя пользовательского атрибута + данные (для передачи) => :value="data"
Дочерний элемент: реквизит ["имя пользовательского свойства на родительском компоненте"] => для приема данных)
ребенок проходит мимо родителей
Зарегистрируйте дочерний компонент в родительском компоненте и привяжите пользовательские прослушиватели событий к метке дочернего компонента.
сын:this.$emit('имя пользовательского события', данные) Привязать @имя пользовательского события = 'функция обратного вызова' на метке дочернего компонента
родитель: методы: {настраиваемое событие() {//логическая обработка} }
родственный компонент
через центральную связь let bus = new Vue()
A: методы: { функция {bus.$emit('自定义事件名'，数据)} Отправить
Б: создано () {bus.$on('A发送过来的自定义事件名'，函数)} Для приема данных
16. Параметры маршрутизации Vue
1. Используйте параметры, переданные методом запроса, для использования
this.$route.queryпринимать
2. Используйте параметры, переданные с помощью метода paramsthis.$route.paramsпринимать
17. Что такое векс? Какие виды свойств существуют?
Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js.
Есть 5 видов, а именно состояние, геттер, мутация, действие, модуль
Что такое магазин vuex?
Vuex — это склад, а на складе много объектов. Среди них состояние - это место хранения источника данных, соответствующее данным, хранящимся в состоянии данных в общем объекте vue, является отзывчивым, компонент vue считывает данные из хранилища, если данные в хранилище изменяются, компоненты, которые полагаются для этих данных также произойдет обновление, чтобы сопоставить глобальное состояние и геттеры с вычисленными вычисляемыми свойствами текущего компонента через mapState
Что такое геттер vuex?
Геттер может выполнять операции вычисления состояния, которое является вычисляемым свойством хранилища. Хотя его также можно использовать в качестве вычисляемого свойства в компоненте, геттеры можно повторно использовать между несколькими компонентами. Если состояние используется только в одном компонент, геттеры могут быть опущены.
Что такое мутация vuex?
Единственный способ изменить состояние в хранилище Vuex — совершить мутацию.
Каково действие vuex?
Действие похоже на мутацию, разница в том, что действие отправляет мутацию вместо прямого изменения состояния. Действие может содержать любую асинхронную операцию. Должен ли код запроса ajax в vue быть прописан в методах компонента или в действии vuex
Что такое модуль vuex?
Перед лицом сложных приложений, когда нужно управлять многими состояниями, нам нужно разделить объект хранилища vuex на модули.
Если запрошенные данные не должны передаваться другим компонентам и используются только в запрошенном компоненте, их не нужно переводить в состояние vuex.Если они повторно используются в других местах, поместите запрос в действие для легкое повторное использование и возврат упаковки в соответствии с обещанием
18. В чем сходство и различие инструкций v-show и v-if?
Инструкция v-show предназначена для отображения или скрытия элемента путем изменения свойства displayCSS элемента.
Директива v-if напрямую уничтожает и перестраивает DOM для отображения и скрытия элементов.
19. Как заставить CSS работать только в текущем компоненте?
текущий компонент
<style>превратиться в<style scoped>
20.<keep-alive></keep-alive>Какова роль?
<keep-alive></keep-alive>При обертывании динамических компонентов неактивные экземпляры компонентов кэшируются, в основном для сохранения состояния компонента или предотвращения повторного рендеринга. Большой народный язык: например, если есть список и деталь, то пользователь часто будет выполнять открытые детали => возврат списка => открытые детали... В этом случае список и детали являются обеими страницами с высокой частотой, тогда вы можете использовать компонент списка<keep-alive></keep-alive>Кэширование, чтобы каждый раз, когда пользователь возвращается к списку, он мог быстро выполнить рендеринг из кеша вместо повторного рендеринга.
21. В чем разница между delete и Vue.delete для удаления массива?
удалить просто удаленный элемент становится пустым/неопределенным, а значение ключа других элементов остается неизменным. Vue.delete напрямую удаляет массив и изменяет значение ключа массива.
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[0]
console.log(a) //[empty,2,3,4]
this.$delete(b,0)
console.log(b) //[2,3,4]
22.$nextTickчто это?
Отзывчивость vue заключается не в изменении dom сразу после изменения данных, а в обновлении dom по определенной стратегии.
$nextTickОн должен выполнить отложенный обратный вызов после окончания следующего цикла обновления DOM.После изменения данных используйте $nextTick, чтобы получить обновленный DOM в обратном вызове.
23. Может ли v-on отслеживать несколько методов?
Может.
<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />
24.v-общие модификаторы
.stop Этот модификатор предотвратит всплывание события. То же, что и вызов метода event.stopPropagation()
.prevent Этот модификатор предотвращает поведение по умолчанию для текущего события. То же, что и вызов метода event.preventDefault()
.self Эта директива запускает обратный вызов только в том случае, если событие запускается из самого элемента, к которому оно привязано.
.once Этот модификатор указывает, что связанное событие будет запущено только один раз.
25. Роль v-для ключа.
Когда Vue обновляет отображаемый список элементов с помощью v-for, по умолчанию используется стратегия «повторное использование на месте». Если порядок элементов данных изменен, вместо того, чтобы перемещать элементы DOM в соответствии с изменением элемента данных, Vue просто повторно использует каждый элемент и следит за тем, чтобы каждый элемент отображался с определенным индексом. Чтобы дать Vue подсказку, чтобы он мог отслеживать идентификатор каждого узла и, таким образом, повторно использовать и изменять порядок существующих элементов, вам необходимо предоставить каждому элементу уникальное ключевое свойство. Атрибут ключа может быть только строкового или числового типа.
Специальный атрибут ключа в основном используется в алгоритме виртуального DOM Vue для идентификации VNodes при сравнении старых и новых узлов. Без ключей Vue использует алгоритм, который сводит к минимуму динамические элементы и пытается максимально исправить/повторно использовать элементы одного и того же типа. С ключом он изменит порядок элементов на основе изменения ключа и удалит элементы, ключ которых не существует.
26. Приоритет v-for и v-if
v-for имеет приоритет над v-if.Если ему нужно каждый раз проходить весь массив, это повлияет на скорость, особенно когда ему нужно отобразить небольшую часть.
27. Дочерний компонент Vue вызывает метод родительского компонента
Первый способ — непосредственно в дочернем компоненте через
this.$parent.eventдля вызова метода родительского компонента
Второй метод заключается в использовании $emit в дочернем компоненте для запуска события в родительском компоненте, а родительский компонент прослушивает это событие.
28. Что такое объект Promise?
1. Промис — это решение для асинхронного программирования, это контейнер, который содержит результат события (обычно асинхронной операции), которое завершится в будущем. Синтаксически Promise — это объект, из которого можно получить сообщение для асинхронной операции. Обещания предоставляют унифицированный API, и различные асинхронные операции могут обрабатываться одинаково. Объект promise — это конструктор, который генерирует экземпляр Promise;
2. Две характеристики обещания Состояние объекта не зависит от внешнего мира && Как только состояние изменится, оно больше не изменится, и результат может быть получен в любое время (состояние ожидания --> выполнено || ожидается --> отклоненный)
29.Каковы характеристики аксиом?
1. Axios — это HTTP-библиотека на основе обещаний, которая поддерживает все API-интерфейсы обещаний;
2. Может перехватывать запросы и ответы;
3. Он может преобразовывать данные запроса и данные ответа и автоматически преобразовывать содержимое ответа в данные типа json;
4. Это более безопасно, и клиент поддерживает защиту XSRF;
30. Что такое ref в vue?
ref используется для регистрации ссылок на элементы или подкомпоненты. Справочная информация будет зарегистрирована в объекте $refs родительского компонента. При использовании в обычном элементе DOM ссылка указывает на элемент DOM; при использовании в дочернем компоненте ссылка указывает на экземпляр компонента.
31. Режим маршрутизации Vue, как его реализовать?
хеш-режим и режим истории
Режим хеширования: в браузере символ "#", символы после # и # называются хэшем и читаются с помощью window.location.hash; Возможности: Хотя хеш находится в URL-адресе, он не включается в HTTP-запрос, используется для управления действиями браузера и бесполезен для безопасности сервера.Хэш не перезагружает страницу. В режиме хеширования: в запрос будет включено только содержимое перед символом хэша, напримерhttp://www.xxx.com, так что для бэкенда, даже если маршрут не полностью пройден, ошибка 404 возвращаться не будет.
Режим истории: история принимает новые функции HTML5 и предоставляет два новых метода: pushState(), replaceState() может изменять стек истории браузера, а событие popState отслеживает изменения состояния.
режим истории: URL-адрес внешнего интерфейса должен совпадать с URL-адресом, который фактически инициирует запрос к серверной части, напримерhttp://www.xxx.com/items/id. Бэкэнд вернет ошибку 404, если ему не хватает обработки маршрута для /items/id. Официальный сайт Vue-Router описывает это так: «Однако, чтобы хорошо играть в этом режиме, ему также нужна поддержка фоновой конфигурации… Итак, вам нужно добавить ресурс-кандидат, который покрывает все ситуации на стороне сервера: если URL-адрес не соответствует никаким статическим ресурсам. Он должен возвращать ту же страницу index.html, от которой зависит ваше приложение».
32.$routeи$routerразница?
$routeявляется «информационным объектом маршрутизации», включаяpath，params，hash，query，fullPath，matched，nameи другие параметры информации о маршрутизации.
$routerЭто объект «экземпляр маршрута», который включает в себя метод перехода маршрута, функцию ловушки и т. д.
33. Каковы два ядра vue.js?
Компонентная система, управляемая данными
34. Вопрос о том, насколько vue совместим с ie.
Плагин babel-polyfill
35. Решение для vuex обновления страницы очищается?
1. localStorage сохраняется локально, а затем возвращается
2. Повторно получить интерфейс для получения данных
36. Как оптимизировать медленную скорость загрузки первого экрана SPA-приложения?
1. Внедрить общедоступную JS-библиотеку через тег script, уменьшить размер app.bundel, разрешить браузеру загружать файлы ресурсов параллельно и повысить скорость загрузки;
2. При настройке маршрутизации страницы и компоненты импортируются с использованием ленивой загрузки для дальнейшего уменьшения размера app.bundel, а соответствующий js-файл загружается при вызове компонента;
3. Добавьте картинку загрузки на первый экран, чтобы улучшить взаимодействие с пользователем;
37. Vue изменяет массив, чтобы вызвать обновление представления.
Следующие вызовы методов изменяют исходный массив: push(), pop(), shift(), unshift(), splice(), sort(), reverse(), Vue.set(target, key, value)
调用方法：Vue.set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
38. В каком цикле завершается рендеринг DOM?
mounted
Обратите внимание, что смонтированный не обещает, что все дочерние компоненты также будут смонтированы вместе. Если вы хотите дождаться рендеринга всего представления, замените mount на vm.$nextTick
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
39. Кратко опишите, для каких сценариев подходит каждый цикл
beforecreate : здесь вы можете добавить событие загрузки, которое будет запускаться при загрузке экземпляра.
created : Сюда пишется событие завершения инициализации.Если здесь заканчивается событие загрузки, сюда же подходят асинхронные запросы для вызова
Mounted : Смонтируйте элемент и обновите узел DOM : Если данные обрабатываются единообразно, напишите здесь соответствующую функцию
beforeDestroy : вы можете сделать окно подтверждения, чтобы подтвердить событие остановки
40. Какие хуки сработают при первой загрузке?
вызовет beforeCreate , created , beforeMount , смонтированный
41. Класс динамической привязки
activeимя класса,isActiveПеременная
<div v-bind:class="{ active: isActive }"></div>