Вопросы для собеседования на Vue.js, к которым вы должны быть готовы

Если вы готовитесь к собеседованию по Vue.js, то это 10 быстрых вопросов, на которые вы должны быть готовы ответить.

1. Что такое Vue.js?

Vue.js - это интерфейсный JavaScript-фреймворк для создания пользовательских интерфейсов с упором на одностраничные приложения. Он способствует «высокой развязке», что упрощает разработчикам создание пользовательских интерфейсов и быстрое прототипирование.

2. Каковы преимущества Vue.js?

Vue.js легкий и, следовательно, высокопроизводительный. Он удобен для разработчиков, поэтому его легко освоить. Он очень гибкий и имеет отличные инструменты.

3. Что такое экземпляр Vue?

Экземпляр Vue, часто называемый vm в приложении Vue, является ViewModel шаблона MVVM, которому следует Vue. Экземпляр Vue является корнем приложения Vue.

new Vue({
  render: h => h(App),
}).$mount(‘#app’)

Создается новый экземпляр Vue, который подключается к элементу HTML, содержащему идентификатор #app.

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

v-if не будет отображать элемент в DOM, если выражение оценивается как false. В случае v-show он будет отображать элемент в DOM несмотря ни на что, но будет скрыт, если false. v-if поддерживает v-else и v-else-if и может использоваться внутри элемента <template>, v-show этого не поддерживает.

5. Что такое компоненты Vue?

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

<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template>
<script>
export default {
  name: ‘10 Quick-Fire Vue Interview Questions’
}
</script>
<style scoped>
p {
  padding: 10px;
  font-size: 30px;
}
</style>

6. В чем разница между локальной и глобальной регистрацией компонента?

Глобальная регистрация компонента позволяет [повторно] использовать его во всем приложении, даже в других компонентах. Локальные компоненты могут использоваться только в том компоненте, в котором они были зарегистрированы.

Вы можете зарегистрировать компонент глобально, используя Vue.component(name, componentData), и зарегистрировать компонент локально, добавив его к свойству components компонента, к которому вы хотите добавить его.

7. Что такое реквизит?

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

Vue.component('myComponent', {
  props: ['name'],
  // OR
  // props: { name: String },
  template: '<div>Hello {{ name }}</div>'
})
<my-component name="Giuseppe Campanelli"></my-component>

8. Как реализовать двустороннюю привязку?

Вы можете добиться двусторонней привязки, указав свойство v-model в элементе ввода. Это гарантирует, что при изменении значения элемента изменится и свойство данных Vue. И если свойство данных изменится, изменится и значение в поле ввода.

<input type="text" v-model="firstName">
<p>Hello {{ firstName }}</p>

В этом примере, если firstName изменяется с помощью ввода или метода, изменение будет отражено в обоих.

9. Что такое миксины?

Примеси - это гибкий способ, позволяющий распределять функции между компонентами. Примесь может содержать любую опцию компонента. Когда компонент ссылается на один или несколько миксинов, параметры миксина будут «смешаны» с компонентом.

В случае конфликта данных свойство данных компонентов будет иметь приоритет. То же самое и с методами, компонентами, директивами. Что касается одноименных хуков жизненного цикла, оба будут объединены в массив, в котором хук миксина будет вызываться перед хук компонентом.

var mixin = {
  data: function () {
    return {
      message: 'hello from mixin'
    }
  },
  created: function () {
    console.log('mixin hook called ')
  }
}
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'hello from component'
    }
  },
  created: function () {
    console.log('component hook called')
  }
})

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

Примечание. Глобальное применение миксина повлияет на каждый экземпляр Vue.

10. Что такое Vue Router?

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

Заключение

Надеюсь, эти вопросы подготовили вас к предстоящему интервью на Vue. Следите за обновлениями части 2!