50+ основных вопросов и ответов на собеседовании по Vue.js: от простого до продвинутого

Основные вопросы интервью Vue JS

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

2. Как вы создаете компоненты в Vue?

<script>
export default {
  data() {
    return {
      name: 'Bob'
    }
  }
}
</script>

<template>
  <h1>Hello {{ name }}</h1>
</template>

export default {
  data() {
    return {
      name: 'Bob'
    }
  },
  template: `
    <h1>Hello {{ Bob }}</h1>
  `
}

3. Что такое реквизиты в Vue?

export default {
  props: ['foo'],
  created() {
    console.log(this.foo)
  }
}

4. Опишите, как данные передаются между компонентами в Vue.

<ChildComponent title="Hello!" />

<!-- child.vue -->
<button @click="$emit('childevent')">click me</button>

<!-- parent listening to the event -->
<ChildComponent @childevent="callback" />

5. Что такое слоты?

<FancyHeader>
  Hello! <!-- slot content -->
</FancyHeader>

<h1 class="fancy-header">
  <slot></slot> <!-- slot outlet -->
</h1>

<h1 class="fancy-header">
  Hello!
</h1>

6. Как добавить резервный контент для слотов?

<div class="greeting">
  <slot>
     <h2>Hello</h2> <!-- fallback content -->
  </slot>
</div>

<GreetingComponent>
  <h1>Whats up?</h1>
</GreetingComponent>

<!-- will generate the following output -->
<div class="greeting">
  <h1>Whats up?</h1>
</div>

<GreetingComponent></GreetingComponent>

<!-- will generate the following output -->
<div class="greeting">
  <h2>Hello</h2>
</div>

7. Что такое привязки атрибутов в Vue?

<!-- v-bind directive -->
<div v-bind:id="dynamicId"></div>

<!-- short form -->
<div :id="dynamicId"></div>

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

export default {
  data() {
    return {
      name: 'Bob'
    }
  },
  template: `
    <h2>Hello {{ name }}</h2>
  <input v-model="name"/>
  `
}

9. Что такое директивы в Vue?

10. Как передать несколько значений в директиву?

<div v-user="{ name: 'Bob',  age: 30 }"></div>

app.directive('user', (el, binding) => {
  console.log(binding.value.name) // => "Bob"
  console.log(binding.value.age) // => "30"
})

Как Рекрутер помимо найма может зарабатывать от 1 млн. рублей в месяц? Скачивайте бесплатно полный гайд по ссылке!

Дополнительные вопросы для собеседования по Vue для начинающих

Промежуточные вопросы интервью Vue

1. Как вы используете события для связи между компонентами Vue?

<!-- child -->
<button @click="$emit('some-event')">Emit some event</button>

<!-- parent -->
<ChildComponent @some-event="callback" />

2. Объясните разницу между слотами и слотами с ограниченной областью действия .

3. Что такое фильтры в Vue?

filters: {
 capitalize: function (value) {
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  } 
}

<!-- mustache -->
{{ name | capitalize }}

<!-- v-bind -->
<div v-bind:id="name | capitalize">

4. Как вы используете v-for директивы для рендеринга набора элементов?

<ul id="list">
  <li v-for="(item) in users">
    {{ item.name }}
  </li>
</ul>

var vm = new Vue({
  el: '#list',
  data: {
    users: [
      { name: 'Mike' }
      { name: 'Andy' },
    ]
  }
})

<ul id="list">
  <li v-for="(value, key, index) of user">
    {{ index }}. {{ key }}: {{ value }}
  </li>
</ul>

var vm = new Vue({
  el: '#list',
  data: {
    user: {
      firstName: 'Mike',
      lastName: 'Woz',
      age: 30
    }
  }
})

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

Больше промежуточных вопросов для собеседования по Vue.js для практики

Как Рекрутер помимо найма может зарабатывать от 1 млн. рублей в месяц? Скачивайте бесплатно полный гайд по ссылке!

Продвинутые вопросы и ответы на собеседовании по Vue

1. Что такое функциональные компоненты ?

2. Что такое Composition API в Vue?

3. Какие существуют способы добавления анимации в приложение Vue?

4. Что такое плагины в Vue?

// plugins/myplugin.js

export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

5. Каковы некоторые распространенные методы оптимизации вашего приложения Vue?

Более сложные вопросы для собеседования по VueJS для практики

Заключение

Мы - ИТ кадровое агентство, которое поможет вам найти разработчиков за менее чем 2 недели. Свяжитесь с нами уже сегодня, чтобы узнать, как мы можем помочь масштабировать ваш следующий проект. Мы гарантируем поиск самого сильного кандидата, а не самого дорогого. За 10 лет мы закрыли более 5500 вакансий и собрали более 25 команд с нуля. Вы можете ознакомиться с отзывами наших клиентов о нашем рекрутинговом агентстве. Если вам нужны дополнительные референсы, напишите нам в Telegram.