Это 3-й день моего участия в августовском испытании обновлений, узнайте подробности события:Испытание августовского обновления
Обобщите некоторые знания, связанные с Vue, организуйте заметки и поделитесь с вами, некоторые знания часто будут спрашивать во время интервью перед интерфейсом, поэтому сделайте запись, я надеюсь, что это будет полезно для всех, если возникнут какие-либо проблемы, вы можете указать на это, и это будет активно исправлено.
Если вам это нравится, вы можете поставить лайк или оставить сообщение, и я продолжу обновлять вопросы интервью~~~~, спасибо~~~
1. Во-первых, расскажите о своем понимании Vue? что такое vue.js?
Vue (произносится как /vjuː/, похоже на view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от других крупных фреймворков, Vue разработан так, чтобы его можно было применять слой за слоем снизу вверх. Основная библиотека Vue ориентирована только на уровень представления, который не только прост в использовании, но и легко интегрируется со сторонними библиотеками или существующими проектами. С другой стороны, в сочетании с современными наборами инструментов и различными вспомогательными библиотеками Vue также полностью способен работать со сложными одностраничными приложениями. Vue — это прогрессивный фреймворк, эквивалентный уровню представления, двусторонняя привязка данных, он легче, эффективнее по производительности, проще в использовании, чем другие фреймворки, низкая стоимость обучения, vue нужен объект el для создания экземпляра,
2. В чем разница между Vue, Angular и React?
Angular — это фреймворк mvvm, а vue — прогрессивный фреймворк, эквивалентный уровню представления, с двусторонней привязкой данных, но двусторонняя привязка данных в angular основана на механизме грязной проверки, а двусторонняя привязка данных Vue основан на ES5. Реализованы геттеры и сеттеры, а в angular есть собственный набор правил компиляции шаблонов. el для создания экземпляра, а Angular находится под всей html-страницей, одностраничным приложением, а vue может иметь экземпляр vue.
1. Отличия от AngularJS
Та же точка:
Оба поддерживают директивы: встроенные директивы и пользовательские директивы; оба поддерживают фильтры: встроенные фильтры и настраиваемые фильтры; оба поддерживают двустороннюю привязку данных; ни один из них не поддерживает младшие браузеры.
разница:
Стоимость обучения AngularJS высока, например, добавление функции внедрения зависимостей, в то время как API, предоставляемый самим Vue.js, относительно прост и интуитивно понятен; с точки зрения производительности AngularJS полагается на грязную проверку данных, поэтому чем больше наблюдателей, тем медленнее; Vue.js использует Основываясь на наблюдениях отслеживания зависимостей и использовании асинхронных обновлений очереди, все данные запускаются независимо.
2. Отличия от React
Тот же пункт:React использует специальный синтаксис JSX, а Vue.js также рекомендует писать специальный формат файла .vue при разработке компонентов.Существуют некоторые соглашения для содержимого файла, оба из которых должны быть скомпилированы и использованы; центральная идея заключается в том, то же самое: все является компонентом, экземпляром компонента Они могут быть вложены друг в друга; все они предоставляют разумные функции-ловушки, позволяющие разработчикам настраивать свои требования к обработке; ни один из столбцов с номерами AJAX, Route и другие функции не встроены в основной пакет, но загружаются в виде плагинов, в разработке компонентов Оба поддерживают функции примесей.
разница:
Виртуальный DOM, используемый React, выполнит грязную проверку визуализированных результатов, Vue.js предоставляет в шаблоне инструкции, фильтры и т. д., что позволяет очень удобно и быстро управлять виртуальным DOM.
3. Каков жизненный цикл vue?
Процесс экземпляра от создания до уничтожения является жизненным циклом. То есть ряд процессов от начала создания, инициализации данных, компиляции шаблонов, монтирования Dom → рендеринга, обновления → рендеринга, выгрузки и т. д., мы называем это жизненным циклом Vue.
Сценарии применения
beforeCreate: после нового экземпляра Vue есть только некоторые хуки жизненного цикла по умолчанию и события по умолчанию, и больше ничего не было создано. Когда выполняется жизненный цикл beforeCreate, данные в данных и методах не были инициализированы. На данном этапе нельзя использовать данные в данных и методы в методах.
create: И данные, и методы были инициализированы. Если вы хотите вызывать методы в методах или манипулировать данными в данных, вы можете работать на этом этапе как можно раньше.
beforeMount: При выполнении этого хука шаблон был скомпилирован в памяти, но не смонтирован на страницу, в это время страница еще старая
mounted: Когда этот хук выполняется, это означает, что экземпляр Vue был инициализирован. В этот момент компонент покидает фазу создания и переходит в фазу выполнения. Если мы хотим манипулировать узлами DOM на странице через плагин, мы можем сделать это как можно раньше и на данном этапе.
beforeUpdate: при выполнении этого хука данные, отображаемые на странице, все еще старые, данные в данных обновляются, и страница не была синхронизирована с последними данными.
updated: данные, отображаемые на странице, и данные в данных были синхронизированы, и они являются последними.
beforeDestory: Экземпляр Vue перешел в фазу уничтожения из фазы выполнения. В это время доступны все данные и методы, директивы, фильтры... не совсем уничтожен
destroyed: В настоящее время все данные и методы, инструкции, фильтры... находятся в недоступном состоянии. Компонент уничтожен.
4. Какова роль жизненного цикла vue?
Он имеет несколько обработчиков событий в своем жизненном цикле, что упрощает формирование хорошей логики при управлении процессом всего экземпляра Vue.
5. Сколько этапов в жизненном цикле vue?
Всего его можно разделить на 8 этапов: до/после создания, до/после загрузки, до/после обновления, до/после уничтожения.
6. Какие хуки будут срабатывать при загрузке первой страницы?
beforeCreate, созданный, beforeMount, смонтированный
7. В какой периодической функции vue получает данные?
Доступны обычно созданные/предмонтированные/смонтированные.
Например, если вы хотите работать с DOM, им можно управлять только при монтировании.
8. Что такое структура mvvm?
Vue — это инфраструктура mvvm, которая реализует двустороннюю привязку данных: при изменении представления обновляется слой модели, а при изменении слоя модели обновляется слой представления. Во Vue используется технология двусторонней привязки, то есть изменения в View могут изменять Model в реальном времени, а изменения в Model также могут обновляться в View в реальном времени.
9. Как реализована двусторонняя привязка данных во Vue?
Двусторонняя привязка данных Vue достигается за счет перехвата данных в сочетании с режимом публикации-подписки, то есть данные и представление синхронизируются, данные изменяются, представления изменяются, представления изменяются и данные изменяются соответственно;
Ядро: Что касается двусторонней привязки данных VUE, то ядром является метод Object.defineProperty().
10. Как vue реализует адаптивные данные? (Принцип адаптивных данных)❗
Ссылаться на:blog.CSDN.net/ может быть напрямую 0916/art…
принцип:
Я полагаю, что те, кто использовал vue, знают, что данные, определенные в данных в vue, будут обновляться по мере того, как мы изменяем данные с помощью методов, и соответствующие данные на странице будут обновляться соответственно для реализации адаптивных данных. Но знаете ли вы, как он выполняет эту функцию? Давайте посмотрим, как он делает это волшебство.
Object.defineProperty отслеживает и изменяет прочитанные данные:
Object.defineProperty(obj, prop, descriptor) может передавать три значения, и его эффект заключается в том, что метод определяет новое свойство непосредственно для объекта или модифицирует существующее свойство объекта и возвращает объект.
Первое значение передается в изменяемый объект
Второе значение передается в ключе, который будет изменен в объекте.
Третье значение — это объект, который имеет два метода: set и get, set — операция при изменении значения, get — операция при чтении и изменении значения.
Конфигурация по умолчанию выглядит следующим образом
Теперь давайте изучим, как vue использует Object.defineProperty для мониторинга, изменения и чтения данных.
Мы создаем объект и используем Object.keys(), чтобы вернуть ключи объекта в массив и пройтись по массиву forEach.
Сначала возьмите соответствующее значение ключа, измените каждый другой ключ в этом объекте через Object.defineProperty и отслеживайте изменение данных.При изменении значения, соответствующего ключу, вызовите метод set для печати и отслеживания изменения данных xxxx и изменить значение присвоить значение
При чтении значения, соответствующего ключу, вызовите метод get, чтобы напечатать значение, соответствующее xxxx, и напрямую вернуть текущее значение.
11.Как обнаружить изменения массива в vue?
vue.set()
12.Почему данные в компоненте vue являются функцией?
Из-за особенностей JavaScript в компонентах данные должны существовать в виде функций, а не объектов. Данные в компоненте записываются как функция, а данные определяются в виде возвращаемого функцией значения, так что каждый раз, когда компонент используется повторно, будут возвращаться новые данные, что эквивалентно тому, что каждый экземпляр компонента имеет свою собственное личное пространство данных, которое несет ответственность только за данные, поддерживаемые каждым, не вызывая путаницы. И просто записывается в виде объекта, то есть все экземпляры компонентов совместно используют данные, поэтому при изменении одного все меняется.
13. Кратко опишите сценарии использования вычислений и часов?
computed:
Computed используется, когда свойство зависит от нескольких свойств.
Самый типичный каштан: когда товар в корзине оплачен
watch:
Когда часть данных влияет на несколько частей данных, вам нужно использовать watch
Каштан: поисковые данные
14. В чем разница между созданным и смонтированным?
created: Вызывается перед рендерингом шаблона в html, то есть некоторые значения атрибутов обычно инициализируются, а затем рендерятся в представление.
Mounted: вызывается после преобразования шаблона в html, обычно после завершения страницы инициализации, а затем выполняет некоторые необходимые операции с узлом DOM html.
15. Два режима vue-router?
хэш-режим: символ # в URL адресной строки;
режим истории: Когда объект window.history распечатывается, вы можете увидеть предоставленные в нем методы и длины записей. Воспользуйтесь преимуществами новых методов pushState() и replaceState() в интерфейсе истории HTML5. (Требуется поддержка определенного браузера).
16. В чем разница между параметрами и запросом?
Применение: запрос должен быть импортирован по пути, параметры должны быть импортированы по имени, а полученные параметры аналогичны этим.имя_параметров_маршрута.
отображение URL-адреса:query больше похож на параметры, которые передает get в нашем ajax, а params похож на post, проще говоря, первый отображает параметры в адресной строке браузера, а второй нет.
будь осторожен: Обновление запроса не потеряет данные в запросе, а обновление параметров потеряет данные в параметрах.
//query语法：
this.$router.push({path:"地址",query:{id:"123"}}); //这是传递参数
this.$route.query.id； //这是接受参数
//params语法：
this.$router.push({name:"地址",params:{id:"123"}}); //这是传递参数
this.$route.params.id; //这是接受参数
17. Передача значений между компонентами?
От отца к сыну: реквизит
От ребенка к родителю: метод $emit
18. Какая польза от $nextTick?
Когда вы изменяете значение данных, а затем сразу же получаете значение элемента dom, вы не можете получить обновленное значение. Вам нужно использовать обратный вызов $nextTick, чтобы получить измененное значение данных после рендеринга и обновить его до элемента dom, чтобы добиться успеха.
// 修改数据
vm.msg = 'Hello'
// DOM 还未更新
Vue.nextTick(function () {
// DOM 更新
})
19. Какая роль у
Vue keep-alive — это встроенный компонент, компонент можно включить на удержание или избежать повторного рендеринга.
20. Зачем использовать ключи?
Необходимо использовать ключ, чтобы сделать уникальную идентификацию для каждого узла, и алгоритм Diff может правильно идентифицировать этот узел.
Основная функция — эффективно обновлять виртуальный DOM.
21. В чем сходство и различие инструкций v-show и v-if?
точки соприкосновения: может управлять отображением и скрытием элементов;
разница: Суть метода в другом.Суть v-show заключается в том, чтобы управлять отображением в css, чтобы оно было установлено на none, управлять, чтобы скрывать и компилировать только один раз;v-if заключается в динамическом добавлении или удалении элементов DOM в дереве DOM. , если начальное значение равно false, он не будет компилироваться. Более того, постоянное уничтожение и создание v-if потребляет производительность.
Суммировать: Если вы хотите часто переключать узлы, используйте v-show (стоимость переключения относительно невелика, а начальная стоимость относительно велика). Если вам не нужно часто переключать узел, используйте v-if (первоначальная стоимость рендеринга невелика, а стоимость переключения относительно велика).
22. Как заставить CSS работать только в текущем компоненте?
Добавить область перед стилем в компоненте
двадцать три,Как получить дом?
ref="domName" Использование: this.$refs.domName
24. Назовите несколько команд Vue и их использование?
двусторонняя привязка данных v-модели;
v-для цикла;
v-если v-показать и скрыть;
v-по событию; v-once: связывание только один раз.
25. Использование v-модального?
v-model используется для двусторонней привязки данных формы, по сути является синтаксическим сахаром, за этим стоят две операции:
v-bind связывает свойство значения;
Директива v-on привязывает событие ввода к текущему элементу.
26. Скажите, пожалуйста, как используется каждая папка и файл в каталоге src в проекте vue.cli?
Папка assets предназначена для статических ресурсов, компоненты — для компонентов, маршрутизатор — для определения конфигураций, связанных с маршрутизацией, app.vue — основного компонента приложения, main.js — файла входа.
27. В чем разница между активами и статиками?
Та же точка: И активы, и статические файлы хранят статические ресурсы. Изображения файлов ресурсов, значки шрифтов, файлы стилей и т. д., необходимые в проекте, могут быть помещены в эти два файла, что является одним и тем же пунктом.
разница: файлы статических ресурсов, хранящиеся в активах, будут упакованы и загружены при упаковке проекта, то есть при запуске сборки npm run.Так называемый пакет прост и может пониматься как сжатый том и форматирование кода. Сжатые статические файлы ресурсов в конечном итоге будут помещены в статический файл и загружены на сервер вместе с index.html. Файлы статических ресурсов, размещенные в static, не будут проходить процесс упаковки, сжатия и форматирования, а напрямую попадают в упакованный каталог и загружаются прямо на сервер. Поскольку он избегает сжатия и загружает напрямую, это повысит определенную эффективность при упаковке.Однако, поскольку файлы ресурсов в статике не сжаты, объем файла больше, чем у упакованного файла в активах. Это займет больше места на сервере.
предложение: Файлы стилей, файлы js и т.д., необходимые шаблону в проекте, могут быть размещены в активах, и выполняется процесс упаковки. Уменьшите громкость. Введенные в проект сторонние файлы ресурсов, такие как iconfoont.css, можно разместить в статике, потому что эти сторонние файлы обработаны, и нам больше не нужно их обрабатывать и загружать напрямую.
28. Может ли v-on отслеживать несколько методов?
Да, например: .
29. Две основные точки зрения
Компонентная система, управляемая данными
Управляемый данными: ViewModel, который обеспечивает согласованность данных и представлений.
Компонентная система: пользовательский интерфейс приложения можно рассматривать как состоящий из дерева компонентов.
30. Разница между vue и jQuery
jQuery是使用选择器($)选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。
Vue полностью разделяет данные и представление через объект Vue. Больше нет необходимости обращаться к соответствующему DOM-объекту для работы с данными, можно сказать, что данные и представление разделены и связаны друг с другом через vm объекта Vue. Это легендарный MVVM.
31. Разница между delete и Vue.delete для удаления массивов
удалить просто удаленный элемент становится пустым/неопределенным, а значение ключа других элементов остается неизменным. Vue.delete напрямую удаляет массив и изменяет значение ключа массива.
32. Каковы характеристики аксиом
Создайте XMLHttpRequests из браузера;
node.js создает http-запрос;
Поддержка Promise API;
Перехватывать запросы и ответы;
Преобразование данных запроса и данных ответа;
отменить запрос;
Автоматически перейти на json.
Параметрами поля отправки в axios являются данные и параметры.Разница между ними заключается в том, что параметры отправляются вместе с адресом запроса, а данные отправляются как тело запроса.
params обычно применимы для получения запросов, а data обычно применимы для отправки запросов на размещение.
33. Проблема с миганием страницы инициализации Vue
При разработке с помощью Vue до инициализации Vue, поскольку Vue не управляет элементом div, код, который мы пишем, будет подвержен размытию до того, как он будет проанализирован, и мы увидим слова, похожие на {{message}}, хотя при нормальных обстоятельствах это время очень короткое, но нам еще необходимо решить эту задачу.
Во-первых: добавить [v-cloak] { в css
дисплей: нет;
}.
Если это не решит проблему полностью, добавьте в корневой элемент style="display: none;" :style="{display: 'block'}"
34. Метод запуска обновления представления, когда vue обновляет массив
push(); pop(); shift(); unshift(); splice(); sort(); reverse()
35. Модификаторы, обычно используемые Vue?
.stop: эквивалентно event.stopPropagation() в JavaScript для предотвращения всплытия событий;
.prevent: Эквивалентно event.preventDefault() в JavaScript, предотвращая выполнение предустановленного поведения (если событие можно отменить, событие отменяется без остановки дальнейшего распространения события);
.capture: В отличие от всплывающих событий, захват событий происходит снаружи внутрь;
.self: будет запускать события только в пределах своей области, не включая дочерние элементы;
.once: сработает только один раз.
36. Проблемы, связанные с Vuex
Ссылаться на:blog.CSDN.net/U012967771/…
37. Что такое векс? как использовать? В каких функциональных сценариях он используется?
Управление состоянием во фреймворке vue. Внесите store в main.js и выполните инжект.
Создал новый каталог store.js, ...... экспорт.
Сценарии: В одностраничном приложении состояние между компонентами. Воспроизведение музыки, статус входа, добавить в корзину
38. О VueX
VueX — это инструмент управления состоянием, подходящий для использования при разработке проектов Vue. Только представьте, если вы часто используете способ передачи параметров компонентами для синхронизации значений в данных при разработке проекта, как только проект станет очень большим, управлять этими значениями и поддерживать их будет довольно сложно. С этой целью Vue предоставляет унифицированный инструмент управления этими значениями, которые часто используются несколькими компонентами — VueX. В проекте Vue с VueX нам нужно только определить эти значения в VueX для использования в компонентах всего проекта Vue.
39. Цель использования Vuex
Реализовать многокомпонентное управление состоянием. Vuex — хороший помощник, когда требуется обмен данными между несколькими компонентами.
40. Пять ядер Vuex
Среди них требуются состояние и мутация, а другие могут быть добавлены в соответствии с требованиями.
1. состояние: отвечает за управление состоянием, аналогично данным в vue, используется для инициализации данных //управление состоянием
2. мутация: посвящена изменению данных в состоянии, вызванному фиксацией//изменением состояния
3. Действие: может обрабатывать асинхронное, запускаемое диспетчером, но не может напрямую изменять состояние.Сначала инициировать действие в компоненте посредством диспетчеризации, затем зафиксировать функцию действия для запуска мутации и изменить значение состояния посредством мутации//Асинхронная операция
4. Геттер: вычисляемое свойство в Vuex, которое эквивалентно вычисляемому в Vue, зависит от значения состояния.Как только значение состояния изменится, геттер будет пересчитан.То есть, когда одни данные зависят от других данных для изменения , это будет использовать геттер
5, модуль: модульное управление//модуль
// 导入vue及vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 挂载vuex
Vue.use(Vuex)
// 创建vuex对象并向外暴露
export default new Vuex.Store({
// 全局属性变量
state: {
},
// 全局同步方法, 调用方法,this.$store.commit("xxx")
mutations: {
},
// 异步方法 调用方法,this.$store.dispatch("xxx")
actions: {
},
// Vuex属性计算,在视图里面当变量使用
getters: {
},
// 模块化注册
modules: {
}
})
В чем разница между действием и мутацией?
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
1. Последовательность процесса
«Соответствующее представление -> Изменить состояние» разделено на две части: представление запускает действие, а действие запускает мутацию.
2. Ролевое позиционирование
В зависимости от последовательности процессов они играют разные роли.
Мутация: сосредоточьтесь на изменении состояния, что теоретически является единственным способом изменить состояние.
Действие: бизнес-код, асинхронный запрос.
3. Ограничения
Роли разные, и у них разные ограничения.
Мутация: Должна выполняться синхронно.
Действие: оно может быть асинхронным, но состоянием нельзя управлять напрямую.
Другие связанные сводные статьи