Часто задаваемые вопросы об интервью в Vue Interviews

опрос

Часто задаваемые вопросы об интервью в Vue Interviews

路过的朋友，可以点个赞，关注一下~~~

переведено изЧасто задаваемые вопросы об интервью в Vue Interviews

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

1. Понимание MVVM?

MVVM — это сокращение от Model-View-ViewModel.ModelОн представляет собой модель данных, и бизнес-логика модификации данных и операций также может быть определена в модели.ViewПредставляет компонент пользовательского интерфейса, который отвечает за преобразование модели данных в пользовательский интерфейс для представления.ViewModelЧтобы отслеживать изменения в данных модели, управлять поведением представления и обрабатывать взаимодействие с пользователем, это просто объект, который синхронизирует представление и модель и соединяет модель и представление.

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

ViewModelСлой представления и слой модели связаны посредством двусторонней привязки данных, а синхронизация между представлением и моделью происходит полностью автоматически без вмешательства человека, поэтому разработчикам нужно сосредоточиться только на бизнес-логике, нет необходимости вручную манипулировать DOM. , нет необходимости Обратите внимание на синхронизацию состояния данных, а комплексное обслуживание состояния данных полностью управляется MVVM.

Во-вторых, жизненный цикл Vue

  • beforeCreate(до создания) до начала наблюдения за данными и событий инициализации
  • created(После создания) Полное наблюдение за данными, работа свойств и методов, события инициализации, свойство $el не отображалось
  • beforeMount(перед загрузкой) Вызывается перед началом монтирования, при первом вызове соответствующей функции рендеринга. Пример завершил следующую конфигурацию: скомпилируйте шаблон, сгенерируйте html из данных и шаблон в данных. Обратите внимание, что HTML-код еще не смонтирован на странице.
  • mounted(после загрузки) Вызывается после того, как el заменяется вновь созданным vm.$el и монтируется на экземпляре. Экземпляр завершил следующую настройку: замените объект DOM, на который указывает атрибут el, скомпилированным выше html-содержимым. Завершите рендеринг html в шаблоне на html-странице. Во время этого процесса выполняется Ajax-взаимодействие.
  • beforeUpdate(перед обновлением) Вызывается перед обновлением данных, перед повторным рендерингом и исправлением виртуального DOM. Дальнейшие изменения состояния могут быть сделаны в этом хуке без запуска дополнительного процесса повторного рендеринга.
  • updated(после обновления) Вызывается после повторного рендеринга и исправления виртуальной модели DOM из-за изменений данных. При вызове DOM компонента обновляется, поэтому можно выполнять операции, зависящие от DOM. Однако в большинстве случаев следует избегать изменения состояния в течение этого времени, так как это может привести к бесконечному циклу обновлений. Этот хук не вызывается во время рендеринга на стороне сервера.
  • beforeDestroy(перед уничтожением) Вызывается перед уничтожением экземпляра. Экземпляр по-прежнему полностью доступен.
  • destroyed(после уничтожения) Вызывается после уничтожения экземпляра. После вызова все прослушиватели событий будут удалены, а все дочерние экземпляры уничтожены. Этот хук не вызывается во время рендеринга на стороне сервера.

Некоторые распространенные проблемы:

1.什么是vue生命周期？

Ответ: Процесс экземпляра Vue от создания до уничтожения — это жизненный цикл. Серия процессов от создания, инициализации данных, компиляции шаблонов, монтирования Dom → рендеринга, обновления → рендеринга и уничтожения называется жизненным циклом Vue.

2.vue生命周期的作用是什么？

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

3.vue生命周期总共有几个阶段？

О: Всего его можно разделить на 8 этапов: до/после создания, до/после загрузки, до/после обновления, до/после уничтожения.

4.第一次页面加载会触发哪几个钩子？

Ответ: Будут запущены следующие команды beforeCreate, created, beforeMount, Mount.

5.DOM 渲染在 哪个周期中就已经完成？

Ответ: Рендеринг DOM завершается в смонтированном.

3. Принцип реализации двусторонней привязки данных в Vue: Object.defineProperty()

Vue в основном реализует двустороннюю привязку данных:采用数据劫持结合发布者-订阅者模式путь, черезObject.defineProperty（）Чтобы захватить установщик и получатель каждого свойства, публикуйте сообщения подписчикам при изменении данных и запускайте соответствующий обратный вызов слушателя. При передаче простого объекта Javascript экземпляру Vue в качестве параметра данных Vue будет перебирать его свойства, превращая их в геттеры/сеттеры с помощью Object.defineProperty . Пользователи не видят геттеры/сеттеры, но внутри они позволяют Vue отслеживать зависимости и уведомлять об изменениях при доступе к свойствам и их изменении.

Двусторонняя привязка данных Vue использует MVVM в качестве точки входа для привязки данных, интегрируяObserver,Compileа такжеWatcherТрое используют Observer для отслеживания изменений данных своих собственных моделей, анализа и компиляции инструкций шаблона с помощью Compile (используется для анализа {{}} в vue) и, наконец, используют наблюдатель для создания коммуникационного моста между наблюдателем и Compile для достижения изменения данных. -> просмотреть обновление; просмотреть изменение взаимодействия (ввод) -> эффект двустороннего изменения модели данных.

js реализует простую двустороннюю привязку

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

4. Передача параметров между компонентами Vue

1. Передать значения между родительскими компонентами и дочерними компонентамиРодительский компонент передается дочернему: дочерний компонент получает данные через метод props; Дочерний компонент передается родительскому компоненту: метод $emit передает параметры

2. Передача данных между неродительскими и дочерними компонентами, передача значений между родственными компонентамиeventBus предназначен для создания центра событий, который эквивалентен транзитной станции, которую можно использовать для передачи и приема событий. Проект относительно небольшой, целесообразнее использовать этот. (Хотя многие рекомендуют использовать VUEX напрямую, это зависит от спроса. Технологии — лишь средство, а достижение цели — королевский путь.)

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

хэш-режим: В браузере символ "#", символы после # и # называются решеткой, используйтеwindow.location.hashчитать;

Возможности: Хотя хеш находится в URL-адресе, он не включается в HTTP-запрос, используется для управления действиями браузера и бесполезен для безопасности сервера.Хэш не перезагружает страницу. В хеш-режиме в запрос будет включено только содержимое перед символом хэша, напримерwww.xxx.com, так что для бэкэнда, даже если маршрут не полностью пройден, ошибка 404 возвращаться не будет.

режим истории: история принимает новые функции HTML5 и предоставляет два новых метода:pushState（）,replaceState（）Вы можете изменить стек истории браузера и прослушивать события popState для изменения состояния.

В режиме истории внешний URL-адрес должен совпадать с URL-адресом, который фактически инициирует запрос к серверной части, напримерwww.xxx.com/items/id. задняя часть…Обработка маршрута для /items/id вернет ошибку 404. Официальный сайт Vue-Router описывает это так: «Однако, чтобы хорошо играть в этом режиме, ему также нужна поддержка фоновой конфигурации… Итак, вам нужно добавить ресурс-кандидат, который покрывает все ситуации на стороне сервера: если URL-адрес не соответствует никаким статическим ресурсам. Он должен возвращать ту же страницу index.html, от которой зависит ваше приложение».

6. В чем разница между Vue, Angular и React?

(Версия постоянно обновляется, и следующие отличия могут быть не корректны. Я использую в своей работе только vue, и я не очень знаком с angular и реагированием)

1. Отличия от AngularJS

  • Тот же пункт: Оба поддерживают директивы: встроенные директивы и пользовательские директивы; оба поддерживают фильтры: встроенные фильтры и настраиваемые фильтры; оба поддерживают двустороннюю привязку данных; ни один из них не поддерживает младшие браузеры.

  • разница: AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

2. Отличия от React

  • Тот же пункт: React использует специальный синтаксис JSX, а Vue.js также рекомендует писать специальный формат файла .vue при разработке компонентов.Существуют некоторые соглашения для содержимого файла, оба из которых должны быть скомпилированы и использованы; центральная идея заключается в том, то же самое: все является компонентом, экземпляром компонента Они могут быть вложены друг в друга; все они предоставляют разумные функции-ловушки, позволяющие разработчикам настраивать свои требования к обработке; ни один из столбцов с номерами AJAX, Route и другие функции не встроены в основной пакет, но загружаются в виде плагинов, в разработке компонентов Оба поддерживают функции примесей.

  • разница: Виртуальный DOM, используемый React, выполнит грязную проверку визуализированных результатов, Vue.js предоставляет в шаблоне инструкции, фильтры и т. д., что позволяет очень удобно и быстро управлять виртуальным DOM.

7. Перехват функции маршрутизации vue

Домашняя страница может управлять навигационными переходами, beforeEach, afterEach и т. д., которые обычно используются для модификации заголовка страницы. Некоторые функции перенаправления, требующие авторизации для настройки страницы.

beforeEachВ основном есть 3 параметра to, from, next:

to：Целевой объект маршрута, в который должен войти маршрут,

from：route маршрут, по которому уходит текущая навигация

next：Функция должна вызывать хук разрешения метода. Эффект выполнения зависит от параметров вызова следующего метода. Вы можете контролировать скачок веб-страниц.

8. Что такое векс? как использовать? В каких функциональных сценариях он используется?

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

Внесите store в main.js и выполните инжект. Создал новое хранилище каталогов, ...... экспорт.

Сценарии: в одностраничном приложении статус между компонентами, воспроизведение музыки, статус входа в систему, добавление в корзину

state

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

mutations

  • Методы, определенные мутациями, динамически изменяют состояние или данные в хранилище Vuex.

getters

  • Вычисляемые свойства, подобные Vue, в основном используются для фильтрации некоторых данных.

action

  • Действия можно понимать как метод асинхронной обработки данных путем изменения метода обработки данных в мутациях, то есть просто для асинхронной обработки данных. Уровень представления отправляет действия через store.dispath.
const store = new Vuex.Store({ //store实例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modulesКогда проект особенно сложен, каждый модуль может иметь свое состояние, мутацию, действие и геттеры, что делает структуру очень понятной и простой в управлении.

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

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

9. Как добавить пользовательские инструкции в vue-cli?

1. Создайте локальную директиву

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2. Глобальная директива

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

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

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

10. Как настроить фильтр в Vue?

html-код:

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

js-код:

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

Глобальное определение фильтров

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Фильтр получает значение выражения (msg) в качестве первого аргумента. Фильтр заглавных букв получит значение msg в качестве первого аргумента.

11. Что вы знаете о keep-alive?

keep-alive— это компонент, встроенный в Vue, который позволяет компонентам сохранять состояние или избегать повторного рендеринга.

После vue 2.1.0 в keep-alive добавлены два новых атрибута: include (включенные компоненты кэшируются) и exclude (исключенные компоненты не кэшируются и имеют более высокий приоритет, чем включаемые).

инструкции

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

Описание параметра

  • include- Строка или регулярное выражение, только компоненты, чьи имена совпадают, будут кэшироваться
  • exclude- Строка или регулярное выражение, любой компонент, имя которого совпадает, не будет кэшироваться
  • includeа такжеexcludeпозволяет условно кэшировать компоненты. Оба могут использовать "," для разделения строк, регулярных выражений и массивов. Не забудьте использовать v-bind при использовании регулярных выражений или массивов.

Пример использования

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

12. Вопросы для интервью, на которые можно ответить одним предложением

1. CSS работает только в текущем компоненте

Ответ: Вы можете указать область действия в теге стиля, например:<style scoped></style>

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

Ответ: v-если отображается в соответствии с условиями, v-show является блочным или не отображает;

3.route和Разница между роутерами

отвечать:route是“`路由信息对象`”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而роутер это "路由实例«Объект включает в себя методы перехода маршрутизации, функции ловушек и т. д.

4. Каковы два ядра vue.js?

Ответ: Компонентная система, управляемая данными.

5. Несколько часто используемых инструкций

A: v-for, v-if, v-bind, v-on, v-show, v-else

6. Модификаторы, обычно используемые Vue?

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

7. Может ли v-on связывать несколько методов?

Ответ: Да

8. Какова роль значения ключа в vue?

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

9. Что такое вычисляемое свойство vue?

Ответ: Слишком много логики в шаблоне сделает шаблон слишком тяжелым и сложным в обслуживании.Когда данные нужно обрабатывать сложно и их можно использовать несколько раз, попробуйте применить метод расчета свойств. Преимущества: 1. Сделать структуру обработки данных понятной 2. В зависимости от данных данные обновляются, и результат обработки обновляется автоматически 3. Внутреннее this вычисляемого свойства указывает на экземпляр vm 4. Когда вызывается шаблон, имя вычисляемого свойства может быть записано напрямую; 5. Обычно используемый метод getter для получения данных, вы также можете использовать метод set для изменения данных; ⑥ По сравнению с методами, методы будут пересчитаны независимо от зависимые данные изменяются, но когда зависимые данные остаются неизменными, вычисление получается из кэша и не будет пересчитываться.

10. Одностраничные приложения, такие как vue, их преимущества и недостатки

отвечать:优点: цель Vue — реализовать адаптивную привязку данных и составные компоненты представления через максимально простой API, а ядром является адаптивная система привязки данных. MVVM, управляемый данными, компонентный, легкий, лаконичный, эффективный, быстрый и дружественный к модулям.缺点: не поддерживает более ранние версии браузеров и поддерживает только IE9 по крайней мере; не способствует SEO-оптимизации (если вы хотите поддерживать SEO, рекомендуется рендерить компоненты через сервер); относительно долго загружается домашняя страница в первый раз, она не может быть использована Кнопки навигации браузера должны реализовать вперед и назад сами по себе.

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

О: В файле index.js в каталоге маршрутизатора добавьте /:id к атрибуту пути и используйте params.id объекта маршрутизатора, чтобы получить его.

Категории