Вопросы для собеседования на 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!