1. Что такое Vue.js?
Vue - это прогрессивный фреймворк для создания пользовательских интерфейсов, который был разработан для постепенного внедрения. Его основная библиотека ориентирована исключительно на уровень представления, поэтому ее можно легко интегрировать с другими проектами или библиотеками.
Но в отличие от React, Vue предоставляет сопутствующие библиотеки для маршрутизации и управления состоянием, которые официально поддерживаются и постоянно обновляются вместе с основной библиотекой.
2. Каковы основные особенности Vue.js?
- Виртуальный DOM: Vue использует виртуальный DOM, аналогичный другим фреймворкам, таким как React, Ember и т. д.
- Компоненты: Компоненты являются основным строительным блоком для многоразовых элементов в приложениях Vue.
- Шаблоны: Vue использует шаблоны на основе HTML.
- Маршрутизация: Vue предоставляет собственный маршрутизатор.
- Встроенные директивы : например, v-if или v-for.
- Легкость: Vue - легкая библиотека по сравнению с другими фреймворками.
3. Почему вы выбрали Vue вместо React или Angular?
Vue.js сочетает в себе лучшие части Angular и React. Vue.js - более гибкое и менее самоуверенное решение, чем Angular, но это все еще фреймворк, а не библиотека пользовательского интерфейса, такая как React.
4. Что такое SFC?
Однофайловые компоненты Vue (также известные как *.vue файлы, сокращенно SFC) - это специальный формат файла, который позволяет нам инкапсулировать шаблон ( <template>), логику ( <script>) и стиль ( <style>) компонента Vue в одном файле.
Vue SFC - это формат файла для конкретной платформы, который должен быть предварительно скомпилирован с помощью @ vue / compiler-sfc в стандартные JavaScript и CSS. Скомпилированный SFC - это стандартный модуль JavaScript (ES).
5. Что такое вычисляемые свойства?
Вычисленные свойства следует использовать для удаления из шаблонов как можно большего количества логики, поскольку в противном случае шаблон станет раздутым и его будет труднее поддерживать. Если у вас сложная логика, включая реактивные данные в вашем шаблоне, вы должны вместо этого использовать вычисляемое свойство.
Вместо методов кэшируются вычисляемые свойства на основе их реактивных зависимостей. Вычисляемое свойство будет переоцениваться только после изменения некоторых его реактивных зависимостей.
6. Что такое наблюдатели?
Наблюдатели следует использовать, когда необходимо выполнить асинхронные или дорогостоящие операции в ответ на изменение данных.
7. В чем разница между локальной и глобальной регистрацией компонента?
Если компонент зарегистрирован глобально, его можно использовать в шаблоне любого экземпляра компонента в этом приложении:
const app = Vue.createApp({});
app.component('component-a', {
/* ... */
});
app.mount('#app');
Глобальная регистрация может излишне увеличить пакет JavaScript, если вы используете системы сборки, такие как Webpack. Если вы перестанете использовать компонент в своем коде, он все равно будет включен в окончательную сборку. Чтобы избежать этого, мы можем зарегистрировать компоненты локально, определив их в компоненте, где это необходимо:
import ComponentA from './ComponentA.vue';
export default {
components: {
ComponentA,
},
// ...
};
Обратите внимание, что локально зарегистрированные компоненты недоступны в подкомпонентах.
8. Какие директивы во Vue самые важные?
- v-if добавляет или удаляет элементы DOM на основе заданного выражения.
- v-else отображает содержимое только тогда, когда выражение, смежное с v-if, принимает значение false.
- v-show похож на v-if, но отображает все элементы в DOM, а затем использует свойство display CSS для отображения / скрытия элементов.
- v-for позволяет нам перебирать элементы в массиве или объекте.
- v-модель используется для двусторонней привязки данных.
- v-on прикрепляет прослушиватель событий к элементу.
9. Что такое экземпляр приложения Vue?
Экземпляра приложения используются для регистрации, которые затем могут быть использованы компонентами внутри этого приложения. Экземпляр приложения создается с createApp:
const app = Vue.createApp({
/* options */
});
В Vue 2 это называлось экземпляром Vue и создавалось следующим образом:
const vm = new Vue({
// options
});
10. В чем разница между односторонним потоком данных и двусторонней привязкой данных?
Vue использует односторонний поток данных. Родители могут передавать данные дочерним компонентам с помощью опоры и связывать данные с помощью директивы v-bind . Когда родительский компонент обновляет значение свойства, оно автоматически обновляется в дочернем компоненте. Вам следует избегать изменения свойства внутри дочернего компонента, и это не повлияет на свойство в родительском компоненте (если это не массив или объект). Используя события, дочерний компонент может обмениваться данными с родителем.
Vue предоставляет директиву v-model для двусторонней привязки данных входных данных формы. v-model- это просто синтаксический сахар в v-bind сочетании с v-on:input.
11. В чем разница между слотом и слотом с ограниченной областью действия? Слот является заполнителем в компоненте ребенка , который наполнен содержанием передается от родителей. Содержимое обычного слота компилируется в родительской области видимости и затем передается дочернему компоненту.
Слоты с заданной областью необходимы, если содержимое слота должно иметь доступ к данным, доступным только в дочернем компоненте. Мы можем привязать атрибуты a <slot>, эти элементы называются реквизитами слотов . Теперь в родительской области мы можем использовать v-slotсо значением для определения имени предоставленных нам реквизитов слота:
12. Как Vue узнает, когда нужно выполнить рендеринг? Vue использует ненавязчивую систему реактивности, которая является одной из его самых отличительных особенностей. Но что такое реактивность? Реактивность - это парадигма программирования, которая позволяет нам декларативно приспосабливаться к изменениям.
В официальной документации для демонстрации реактивности используется таблица Excel:
Реактивная часть происходит, если мы обновляем первое число, и СУММ автоматически обновляется.
К сожалению, переменные JavaScript по умолчанию не реагируют:
let value1 = 1;
let value2 = 2;
let sum = value1 + value2;
console.log(sum); // 5
value1 = 3;
console.log(sum); // Still 5
Поэтому Vue 3 добавил абстракцию в JavaScript Proxy, чтобы можно было добиться реактивности.
В Vue 3 мы можем легко объявить реактивное состояние с помощью reactiveметода
import { reactive } from 'vue';
// reactive state
const state = reactive({
count: 0,
});
или создайте автономные реактивные значения как refs:
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1
13. Как можно повторно использовать код между компонентами?
В Vue 2 и 3 мы можем использовать Mixins для повторного использования кода между компонентами. Начиная с Vue 3, фреймворк предоставляет Composition API, который устраняет недостатки Mixins .
14. Как оптимизировать производительность Vue.js?
Используйте разделение кода (также известное как отложенная загрузка), чтобы уменьшить размер ресурсов, которые необходимо загрузить браузеру для первоначального рендеринга. По сути, это помогает загружать только те части начального экрана, которые необходимы в данный момент. Все остальные части приложения загружаются по мере необходимости и по запросу:
// the MyUser component is dynamically loaded if the `/user route is visited:
const routes = [
{ path: '/user', component: () => import('./components/MyUser.vue') },
];
15. Какие жизненные циклы и соответствующие хуки доступны во Vue?
Каждый экземпляр компонента Vue при создании проходит через серию шагов инициализации. Например, ему необходимо настроить наблюдение за данными, скомпилировать шаблон, подключить экземпляр к DOM и обновить DOM при изменении данных. Попутно он также выполняет главные функции, называемые перехватчиками жизненного цикла, что позволяет нам выполнять собственный код на определенных этапах.
Крючки создания ( beforeCreateи created) позволяют нам выполнять действия еще до того, как компонент будет добавлен в DOM. Эти хуки также выполняются во время рендеринга на стороне сервера. createdКрюк идеальный жизненный цикл крюк для запуска HTTP запросов и заполнения каких - либо исходных данных , что потребности компонентов.
Монтажные крючки ( beforeMount, mounted) часто являются наиболее часто используемыми и позволяют нам получить доступ к компоненту непосредственно до и после первого рендеринга. mountedКрюк идеальное время для интеграции 3 - библиотек или для доступа к DOM.
Перехватчики обновления ( beforeUpdate, updated) вызываются всякий раз, когда изменяется реактивное свойство, используемое компонентом, или что-то еще вызывает его повторную визуализацию. В updatedхуке DOM и модель синхронизированы, в то время как в beforeUpdateхуке обновляется только модель, но не DOM.
Перехватчики уничтожения ( beforeDestroy, destroyed) позволяют нам выполнять действия при уничтожении компонента, такие как очистка или отправка аналитики. В beforeDestroyхуке у нас все еще есть доступ к экземпляру Vue и мы можем, например, генерировать события. destroyedэто идеальное место для окончательной очистки, например, удаления прослушивателей событий.
Существует дополнительный интересный крючок жизненного цикла, называемый errorCaptured, который вызывается, когда фиксируется ошибка любого дочернего компонента.
Этот хук получает три аргумента: ошибку, экземпляр компонента, который вызвал ошибку, и строку, содержащую информацию о том, где была обнаружена ошибка. Хук может вернуть false, чтобы ошибка не распространялась дальше.