Вопросы и ответы на собеседование по Vue, Nuxt, Vuex, Pinia

Vue

Собеседование

08.12.2024

Содержание

Vue JS – популярный и прогрессивный JavaScript-фреймворк, который на равне с ReactJs помогает разработчикам в повседневной работе. Он обеспечивает архитектуру на основе компонентов и поддерживает двустороннюю привязку данных, что упрощает разработку.

В этой статье рассмотрим базовые и сложные вопросы по Vue, Vuex, Nuxt и Pinia.

Рассмотрим популярные вопросы на собеседование по VueJS

Базовые вопросы на собеседовании по Vue JS

Что такое VueJS?

VueJS — это JavaScript-фреймворк, используемый для создания пользовательских интерфейсов и динамических одностраничных приложений. VueJS в основном сосредоточен на frontend части, то есть на разработке интерфейса. Он становится популярнее с каждым днем, поскольку его очень просто интегрировать с другими проектами и библиотеками.

Что такое одностраничное приложение (SPA)?

Одностраничные приложения (Single Page Application) загружаются один раз и обновляют контент без перезагрузки страницы, сокращая время ожидания для пользователей. Они используют JavaScript для извлечения данных и обновления веб-страницы без необходимости перезагружать ее.

Что такое Vue-компонент, как его создать?

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

Чтобы создать компонент в VueJS, выполните следующие действия:

Создайте новый компонент, определив его с помощью ‘template’ , ‘script’ и ‘style’.

<template>
 <div>
 <h1>Hello, {{ message }}</h1>
 </div>
</template>

<script>
export default {
 name: 'MyComponent',
 data() {
 return {
 message: 'gfg'
 }
 }
}
</script>

<style scoped>
h1 {
 color: blue;
}
</style>

Импортируйте компонент на vue-страницу или другой компонент в котором хотите его использовать:

import MyComponent from './MyComponent.vue'

new Vue({
  el: '#app',
  components: {
    MyComponent
  }
})

Вставьте компонент внутрь template в виде тега с названием компонента

<div id="app">
 <my-component></my-component>
</div>

Как работают Props во VueJs

Props во VueJS – это пользовательские атрибуты, которые позволяют родительским компонентам передавать данные дочерним компонентам. Они расширяют возможности повторного использования компонентов, предоставляя возможность обрабатывать дочерние компоненты из их родительских. Они задаются в дочернем компоненте и принимаются в качестве аргументов от родительского.

Синтаксис:

Vue.component('child-component', {
  props: ['propName'],
  // define component
});

В чем разница между односторонней привязкой данных и двусторонней привязкой данных в Vue?

Односторонняя привязка данных	Двусторонняя привязка данных
Данные передаются из модели в представление.	Данные передаются в обоих направлениях между моделью и представлением.
Обычно используется с директивой ‘v-bind’ или синтаксисом усов ‘{{ }} ‘ для динамического обновления представления при каждом изменении модели.	Обычно используется с элементами формы и директивой ‘v-model’.
Следует статической привязке в модели данных.	Следует динамическому связыванию в модели данных

Что такое маршрутизатор (router) Vue?

Маршрутизация во VueJs используется для навигации по приложению Vue, позволяя создавать одностраничные приложения с несколькими представлениями. Маршрутизатор Vue помогает установить связь между URL-адресом/историей браузера и компонентами Vue, предоставляя определенные пути для отображения любого связанного с ним представления.

Что такое экземпляр Vue? Как мы можем создать экземпляр Vue?

Экземпляр Vue JS является корнем всех приложений Vue. Это объект JavaScript, формируемый функцией-конструктором ‘Vue’ и служащий отправной точкой для создания приложения Vue.

Создание экземпляра Vue:

var app = new Vue
({
  // Options object
  el: '#app', // The element to mount the Vue instance to
  data: 
   {
     message: 'Hello GeeksForGeeks!'
   }
)}

Что такое фильтры во VueJs

VueJS filter – это компоненты Vue, которые предлагают функции, называемые фильтрами, для динамического применения форматирования текста к любой части шаблонов данных. В основном они применяются в выражениях v-bind. Фильтры могут выполнять такие задачи, как форматирование дат, выделение текста заглавными буквами, число с выделением тысяч и тд.

Синтаксис:

{{ message | filterName }}

Обработка ошибок и исключений во VueJs

Во VueJS функция отслеживания жизненного цикла errorCaptured позволяет контролировать ошибки, возникающие в компоненте и его дочерних компонентах. Для обработки ошибок в рамках всего приложения вы можете применить глобальные обработчики ошибок, такие как Vue.config.ErrorHandler.

Как создавать пользовательские события во Vue?

В VueJS пользовательские события формируются с применением метода $emit внутри дочернего компонента для активации события. Родительский компонент прослушивает это событие, используя директиву v-on или ее сокращение @. Это обеспечивает связь между дочерним и родительским компонентами.

Что такое виртуальный Dom в VueJS?

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

Объясните, что такое хуки в VueJS? Какие встроенные хуки есть в VueJS?

Хуки – это новая функция, представленная в Vue3. Хуки – это функции, позволяющие добавлять повторно используемую логику к компонентам. Они позволяют управлять состоянием, событиями жизненного цикла и побочными эффектами в функциональных компонентах.

Некоторые из наиболее часто используемых:

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

Что такое ключ в Vue?

В VueJS ключ – это уникальный атрибут, используемый в основном для обнаружения узлов в списке компонентов, отображаемых с использованием v-for . Когда Vue визуализирует несколько элементов с помощью v-for, он использует ключи для эффективного обновления элементов DOM. Правильное использование ключей помогает Vue эффективно обновлять DOM, повторно используя существующие элементы на основе изменений в данных, а не отрисовывая все с нуля, тем самым улучшая выполнение и останавливая ненужные повторные отрисовки.

Опишите разницу между “v-show” и “v-if”?

v-show	v-if
Имеет более высокую начальную стоимость рендеринга при первом отображении, но переключение видимости обходится очень дешево, поскольку изменяет только CSS	Имеет более высокую начальную стоимость рендеринга, поскольку включает в себя добавление или удаление элементов из DOM.
Элемент визуализируется и добавляется в DOM, но он скрывается, если начальное условие равно false.	Элемент вообще не визуализируется, если первое условие ложно.
Идеально подходит для сценариев, когда вам нужно часто переключать видимость элементов без дополнительных затрат на их добавление или удаление из DOM.	Лучше всего подходит для сценариев, когда создание или уничтожение элементов или компонентов обходится дорого, а условия меняются нечасто.

В чем разница между $emit и $on во VueJS?

$emit	$on
Используется для отправки пользовательских событий из дочернего компонента.	Используется для прослушивания (получения) и обработки пользовательских событий в родительском или предковом компоненте.
Обычно используется в дочернем компоненте для уведомления родительского компонента.	Может использоваться как в родительском, так и в дочернем компонентах для обработки событий.
Отправляет события вверх по иерархии компонентов (от дочернего к родительскому).	Может обрабатывать события в любом направлении, в зависимости от того, где он используется (от родителя к потомку или от потомка к родителю).

Какова цель функции ‘data’ в компонентах Vue?

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

<template>
 <div>
   <p>{{ message }}</p>
   <button @click="updateMessage">Update Message</button>
 </div>
</template>

<script>
export default {
 name: 'ExampleComponent',
 data() {
   return {
     message: 'Hello, GFG'
   }
 },
 methods: {
   updateMessage() {
     this.message = 'Welcom to GFG'
   }
 }
}
</script>

Что такое Vue CLI и как он используется?

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

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

Как вы передаете данные между компонентами в VueJS?

Вот обычные способы передачи данных между компонентами:

Props: Props используются для передачи данных от родительского компонента к дочернему.

<!-- App.vue -->
<!-- Parent Component -->
<template>
 <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
 components: {
   ChildComponent
 },
 data() {
   return {
     parentMessage: 'Hello from parent component'
   };
 }
};
</script>

<!-- childcomponent.vue -->
<!-- Child Component -->
<template>
 <div>{{ message }}</div>
</template>

<script>
export default {
 props: {
   message: String
 }
};
</script>

Шина событий (Event Bus): Шина событий может использоваться для обеспечения связи между родственными компонентами.

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

Компонент 1:

// Component1.vue
<template>
 <button @click="sendData">Send Data</button>
</template>

<script>
import { EventBus } from './EventBus';

export default {
 methods: {
   sendData() {
     EventBus.$emit('data-sent', 'Hello from sibling component 1');
   }
 }
};
</script>

Компонент 2:

// Component2.vue
<template>
 <div>{{ receivedData }}</div>
</template>

<script>
import { EventBus } from './EventBus';

export default {
 data() {
   return {
     receivedData: ''
   };
 },
 created() {
   EventBus.$on('data-sent', (data) => {
     this.receivedData = data;
   });
 }
};
</script>

Что такое watch в Vue?

watch – это механизм, предназначенный для обнаружения изменений в свойствах данных в компоненте. Он позволяет реагировать на эти изменения, вводя в действие определенные функции.

Синтаксис:

export default {
  data() {
    return {
      message: 'Hello GFG'
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
      // Следит за изменениями message 
    }
  }
}

Что такое Vue-loader?

Vue Loader – это загрузчик webpack для VueJS, который позволяет записывать компоненты Vue в формате файла .vue. Это позволяет приложениям VueJS использовать однофайловые компоненты (SFCS), которые инкапсулируют HTML, CSS и JavaScript в один файл. Они компилируют эти компоненты в модули JavaScript, доступные браузеру, что облегчает компонентную разработку в проектах VueJS.

Какие различные типы директив присутствуют в VueJS?

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

Вот основные виды директив в VueJS:

v-bind
v-model
v-for
v-on. (или @)

Что такое рендеринг на стороне сервера (SSR) в Vue?

SSR (Server-Side Rendering) во Vue.js — это подход, при котором HTML-код страницы генерируется на сервере и отправляется на клиент. Это позволяет улучшить скорость загрузки страниц и оптимизировать SEO, так как поисковые системы могут сразу увидеть готовый контент, а не ждать его рендеринга на клиентской стороне.

В Vue.js для реализации SSR используется библиотека Vue Server Renderer. Основные шаги включают:

Создание серверного приложения: Создаётся сервер на Node.js, который обрабатывает входящие HTTP-запросы.
Рендеринг приложения: При каждом запросе сервер выполняет приложение Vue и генерирует HTML, который отправляется клиенту.
Гидратация: На стороне клиента Vue “гидратирует” уже сгенерированный HTML, чтобы сделать его интерактивным.

Преимущества SSR:

Улучшение SEO.
Быстрая первая загрузка страниц.
Оценка производительности на стороне сервера.

Недостатки:

Более сложная настройка.
Увеличенные нагрузки на сервер, так как он отвечает за рендеринг страниц.

Расскажите о возможностях Vue?

Вот некоторые из возможностей VueJS:

VueJS позволяет создавать приложения с использованием компонентов, которые инкапсулируют как данные, так и элементы пользовательского интерфейса в блоки многократного использования.
VueJS предоставляет встроенную систему переходов, которая может применять CSS-переходы и анимацию при вставке, обновлении или удалении элементов из DOM.
VueJS поддерживает рендеринг на стороне сервера для ускорения SEO и начальной загрузки приложений.

Как связать класс и стиль в Vue?

Чтобы надежно связать классы и стили в VueJS, используйте директиву v-bind . Вы можете получить привязку к классу, используя любой :class или v-bind:class.

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

Используйте директиву :style или v-bind:style для динамического использования встроенных стилей.

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Как оптимизировать производительность приложения VueJS?

Чтобы оптимизировать приложения VueJS, сосредоточьтесь на снижении количества повторных отрисовок с помощью запоминания.

Используйте виртуальный DOM Vue для грамотных обновлений и улучшайте компоненты с помощью атрибутов v-if, key в v-for и перехватов жизненного цикла, таких как shouldComponentUpdate.
Примените отложенную загрузку с помощью Vue Router.
Примените Vue DevTools для профилирования, учитывайте SSR для SEO и скорость первой загрузки.

В чем разница между функциональными компонентами и компонентами на основе классов?

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

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

Объясните концепцию компонентов высшего порядка в VueJS?

HOC – это функции, которые принимают компонент и возвращают новый компонент с расширенными функциями. Этот шаблон поддерживается функциями более высокого порядка в JavaScript, которые являются функциями, работающими с другими функциями.

Каковы наилучшие методы именования компонентов в VueJS?

Вот некоторые важные стратегии именования компонентов в VueJS:

Используйте PascalCase для имен компонентов: Используйте PascalCase для имен компонентов, особенно при использовании инструкций импорта ES6.
Пример: MyComponent.vue.
Значимые имена: Компонентам следует давать названия в зависимости от их функциональности. Пример: вместо Button.vue используйте submitButton.vue, если компонент конкретно управляет действиями отправки.
Избегайте общих имен: избегайте использования слишком общих имен, таких как “Button”, “Element” или “List”. Эти имена не отражают точные операции.
Пример: примените UserProfileCard.vue вместо просто Card.vue.

Что такое функции рендеринга в VueJS?

Функция рендеринга возвращает виртуальный узел DOM, обычно называемый VNode в экосистеме Vue, который представляет собой интерфейс, позволяющий Vue записывать эти объекты в DOM вашего браузера. Они включают в себя всю информацию, необходимую для работы с Vue.

Можем ли мы вызвать REST API из Vue?

Да, вы можете вызвать REST API. Вы можете включить его в свой проект, используя следующую команду:

npm install axios --save  
Implementing GET method using Axios in Vue JS  
axios({ method: "GET", "URL": "https://httpbin.org/ip" }).then(result => {  
                this.ip = result.data.origin;  
            }, error => {  
                console.error(error);  
            });

Что такое Vuex?

Vuex – это шаблон управления состоянием и библиотека для приложений VueJS. Он действует как центральное хранилище для всех компонентов приложения. Он применяет правила для проверки того, что изменения состояния происходят ожидаемым образом. При объединении с расширением VueJS DevTools оно предоставляет дополнительные расширенные возможности.

Что такое средства защиты навигации в маршрутизаторе vue?

Средства защиты маршрутизатора Vue-navigation защищают навигацию, перенаправляя или отменяя ее. Ниже перечислены три возможных метода подключения к навигациям маршрутизатора.

Глобальный
Для каждого маршрута
Внутрикомпонентный

Как вы обрабатываете ошибки и исключения в приложениях VueJS?

В VueJS хук жизненного цикла errorCaptured позволяет контролировать ошибки, происходящие в компоненте и его дочерних компонентах. Для обработки ошибок в масштабах всего приложения вы можете применить глобальные обработчики ошибок, такие как Vue.config.ErrorHandler.

Как вы можете установить VueJS в свой проект?

Чтобы установить VueJS в свой проект, вы можете выполнить следующие действия:

Используя CDN: включите VueJS напрямую через ссылку CDN в свой HTML-файл:

<script src="https://cdn.jsdelivr.net/npm/vue@2.x.x/dist/vue.min.js"></script>

Используя npm: Установите VueJS через npm (Node Package Manager) для более продвинутых проектов:

npm install vue

Vue CLI Create Project: Создайте новый проект Vue с помощью Vue CLI:

vue create my-vue-app
cd my-vue-app
npm run serve

Профессиональные вопросы для собеседования по VueJS

Почему не рекомендуется использовать директивы v-if и v-for вместе для одного и того же элемента в VueJS?

Обычно не рекомендуется использовать директивы v-if и v-for вместе для аналогичного элемента в VueJS из-за потенциальных результатов работы. Вот почему:

Накладные расходы на рендеринг: когда v-for выполняет итерацию по списку, VueJS формирует элемент DOM для каждого элемента в списке. Если вы объединяете v-if с одним и тем же элементом, VueJS необходимо анализировать директиву v-if для каждой итерации, чтобы выбрать, следует ли отображать этот элемент. Это может привести к ненужным вычислениям и манипуляциям с DOM.
Удобочитаемость: Объединение v-if и v-for может затруднить чтение и понимание шаблона, особенно разработчикам, новичкам в кодовой базе. Это может привести к неясности предполагаемой логики рендеринга элементов на основе терминов.

Приведите пример, демонстрирующий, как можно использовать обработчики событий в VueJS?

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <title>gfg</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
 <button @click="handleClick">Click me!</button>
 <p v-if="clicked">Button was clicked!</p>
</div>

<script>
 new Vue({
   el: '#app',
   data: {
     clicked: false
   },
   methods: {
     handleClick() {
       this.clicked = true;
     }
   }
 });
</script>
</body>
</html>

Назовите несколько веб-сайтов, использующих VueJS?

Netflix
Adobe
Facebook
Gitlab
Xiaomi
Alibaba

Можете ли вы объяснить, что такое однофайловые компоненты в VueJS?

Однофайловые компоненты в VueJS заключают шаблон, логику и стили компонента в один файл ‘ .vue ‘. Они повышают модульность, размещая все функции компонента в одном месте, улучшая читаемость. Во время сборки такие инструменты, как webpack, обрабатывают эти файлы, позволяя использовать инновационные функции, такие как “горячая перезагрузка”. Этот способ упрощает разработку VueJS за счет поддержки компонентной архитектуры.

Что такое свойство $parent в VueJS?

В VueJS свойство $parent предоставляет дочернему компоненту прямой доступ к его прямому родительскому компоненту во вложенной структуре. Это позволяет ребенку взаимодействовать с методами и использовать их.

Что такое плагин vue?

Разработчики могут создавать и добавлять функции глобального уровня в Vue с помощью плагина Vue. Это можно использовать для добавления глобально доступных методов в приложение. Примером плагина Vue является VueFire, плагин Vue, который добавляет специфические для Firebase методы и привязку к неповрежденному приложению.

Обсудите директиву v-cloak в VueJS?

Директива ‘v-cloak’ в VueJS скрывает компоненты до их компиляции, предотвращая отображение скомпилированных шаблонов Vue при загрузке страницы. Это обеспечивает легкий пользовательский опыт, исключая колебания результата, вызванные отложенным рендерингом, используя CSS для скрытия элементов по завершении обработки Vue.

Перечислите некоторые модификаторы событий в VueJS?

В VueJS модификаторы событий – это директивы, которые могут быть присоединены к директиве v-on, чтобы изменить способ управления событиями. Некоторые обычно используемые модификаторы событий содержат:

.stop: останавливает распространение событий.
.prevent: предотвращает поведение событий по умолчанию.
.capture: добавляет прослушиватель событий в режиме захвата.
.passive: повышает производительность прокрутки.

Каковы некоторые популярные фреймворки тестирования для VueJS?

Некоторые популярные фреймворки тестирования для VueJS включают:

Jest
Mocha
Cypress
Karma

Что такое Composition API, и в чем его преимущества по сравнению с Options API?

Composition API позволяет группировать логику по функциональным областям, а не по опциям. Основные преимущества:

Лучшая организация кода в сложных компонентах.
Удобная повторная используемость логики через пользовательские хуки.
Повышенная гибкость при работе с реактивностью.

Как работает реактивность в Vue 3? Расскажите о `reactive` и `ref`.

reactive делает объект реактивным, оборачивая его в прокси. Реактивные объекты отслеживают изменения всех своих полей.

const state = reactive({ count: 0 });
state.count++;

ref создает обертку для значения. Чтобы получить доступ к значению, используется .value.

const count = ref(0);
count.value++;

Как использовать `watch` и `watchEffect`? Чем они отличаются?

watch используется для слежения за конкретными реактивными данными.

watch(() => state.value, (newValue, oldValue) => {
  console.log(`State changed from ${oldValue} to ${newValue}`);
});

watchEffect автоматически отслеживает зависимости внутри переданной функции.

watchEffect(() => {
  console.log(`State is now: ${state.value}`);
  //все что внутри отслеживается
});

Различие: watch требуется явное указание зависимостей, а watchEffect сам обнаруживает их.

Какие хуки жизненного цикла доступны в Vue 3?

onMounted — вызывается после монтирования компонента.
onUpdated — вызывается после обновления компонента.
onUnmounted — вызывается перед удалением компонента.
Дополнительно: onBeforeMount, onBeforeUpdate, onBeforeUnmount.

Vuex

Как устроен Vuex? Из каких частей он состоит?

Vuex — паттерн управления состоянием + библиотека для приложений на Vue.js.

В центре любого Vuex-приложения находится хранилище. «Хранилище» — это контейнер, в котором хранится состояние вашего приложения. Два момента отличают хранилище Vuex от простого глобального объекта:

Хранилище Vuex реактивно. Когда компоненты Vue полагаются на его состояние, то они будут реактивно и эффективно обновляться, если состояние хранилища изменяется.
Нельзя напрямую изменять состояние хранилища. Единственный способ внести изменения — явно вызвать мутацию. Это гарантирует, что любое изменение состояния оставляет след и позволяет использовать инструментарий, чтобы лучше понимать ход работы приложения.

Vuex состоит из:

State — централизованное хранилище данных.
Getters — вычисляемые свойства для получения производных данных.
Mutations — синхронные изменения состояния.
Actions — асинхронные операции, которые могут вызывать мутации.
Modules — возможность разделять хранилище на независимые части.

Пример для Vue3:

import { createStore } from 'vuex'
import { createApp } from 'vue'

const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})
const app = createApp({ /* ваш корневой компонент */ })
app.use(store)

Состояние обновляется через мутации:

store.commit('increment');

Напишите пример асинхронного действия в Vuex.

const store = new Vuex.Store({
  state: { data: null },
  mutations: {
    setData(state, payload) {
      state.data = payload;
    },
  },
  actions: {
    async fetchData({ commit }) {
      const response = await fetch('https://api.example.com');
      const data = await response.json();
      commit('setData', data);
    },
  },
});

Вопросы по Pinia

Это официальное хранилище для Vue 3, заменяющее Vuex. Оно проще в использовании, но не уступает в функциональности. Pinia обеспечивает реактивность состояния, модульность и позволяет легко работать с TypeScript.

Если в двух словах, Pinia позволяет вам хранить и управлять глобальными данными, которые могут быть доступны в любом месте приложения. Это решает проблему, когда данные передаются через множество компонентов или когда нужно делиться состоянием между разными частями приложения.

Чем Pinia отличается от Vuex?

Pinia проще в использовании и декларативнее.
Использует Composition API.
Нет строгого разделения между мутациями и действиями.
Поддерживает TypeScript “из коробки”.

Как создать и использовать хранилище в Pinia?

import { defineStore } from 'pinia';

// Определение хранилища
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

// Использование в компоненте
import { useCounterStore } from './store/counter';

export default {
  setup() {
    const counterStore = useCounterStore();
    return { counterStore };
  },
};

Как реализовать реактивные геттеры в Pinia?

export const useStore = defineStore('main', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

Nuxt

Описание и преимущества Nuxt js

Nuxt.js — это фреймворк на основе Vue.js для создания серверных (SSR), статически сгенерированных (SSG) и SPA приложений.
Преимущества:

SSR для SEO и быстрого рендера.
Интеграция с Vue.js и экосистемой.
Удобные соглашения о конфигурации (Convention over Configuration).
Возможности статической генерации (Static Site Generation).
Поддержка модулей (например, Auth, Axios).

Какие режимы рендера поддерживает Nuxt.js?

Server-Side Rendering (SSR) — рендеринг на сервере для улучшения SEO и времени загрузки.
Static Site Generation (SSG) — генерирует статические HTML-страницы на этапе билда.
Single Page Application (SPA) — клиентский рендеринг.

Режим указывается в файле nuxt.config.js через target и ssr:

export default {
  target: 'server', // для SSR
  ssr: true,
};

Как в Nuxt.js обрабатываются маршруты?

Nuxt автоматически создает маршруты на основе структуры папки pages. Например:

pages/index.vue → /
pages/about.vue → /about
pages/blog/_id.vue → динамический маршрут /blog/:id

Чем отличаются `asyncData` и `fetch`?

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

Пример asyncData:

export default {
  async asyncData({ $axios }) {
    const posts = await $axios.$get('/api/posts');
    return { posts };
  },
};

Что такое middleware в Nuxt.js?

Middleware — это функции, которые выполняются перед загрузкой страницы. Используются для проверки доступа, редиректов и других задач.

Пример:

export default function ({ route, redirect }) {
  if (route.path === '/admin' && !isUserAuthenticated()) {
    redirect('/login');
  }
}

Как работает модуль `@nuxtjs/axios`?

Ответ:
Модуль добавляет глобальный объект $axios, который можно использовать для выполнения HTTP-запросов. Конфигурация задается в nuxt.config.js:

export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://api.example.com',
  },
};

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

async asyncData({ $axios }) {
  const data = await $axios.$get('/data');
  return { data };
}

0 0 голоса

Рейтинг статьи

0 комментариев

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии

Вопросы и ответы на собеседовании по Vue (2024) Nuxt, Vuex, Pinia

Базовые вопросы на собеседовании по Vue JS

Что такое VueJS?

Что такое одностраничное приложение (SPA)?

Что такое Vue-компонент, как его создать?

Как работают Props во VueJs

В чем разница между односторонней привязкой данных и двусторонней привязкой данных в Vue?

Что такое маршрутизатор (router) Vue?

Что такое экземпляр Vue? Как мы можем создать экземпляр Vue?

Что такое фильтры во VueJs

Обработка ошибок и исключений во VueJs

Как создавать пользовательские события во Vue?

Что такое виртуальный Dom в VueJS?

Объясните, что такое хуки в VueJS? Какие встроенные хуки есть в VueJS?

Что такое ключ в Vue?

Опишите разницу между “v-show” и “v-if”?

В чем разница между $emit и $on во VueJS?

Какова цель функции ‘data’ в компонентах Vue?

Что такое Vue CLI и как он используется?

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

Как вы передаете данные между компонентами в VueJS?

Что такое watch в Vue?

Что такое Vue-loader?

Какие различные типы директив присутствуют в VueJS?

Что такое рендеринг на стороне сервера (SSR) в Vue?

Расскажите о возможностях Vue?

Как связать класс и стиль в Vue?

Как оптимизировать производительность приложения VueJS?

В чем разница между функциональными компонентами и компонентами на основе классов?

Объясните концепцию компонентов высшего порядка в VueJS?

Каковы наилучшие методы именования компонентов в VueJS?

Что такое функции рендеринга в VueJS?

Можем ли мы вызвать REST API из Vue?

Что такое Vuex?

Что такое средства защиты навигации в маршрутизаторе vue?

Как вы обрабатываете ошибки и исключения в приложениях VueJS?

Как вы можете установить VueJS в свой проект?

Профессиональные вопросы для собеседования по VueJS

Почему не рекомендуется использовать директивы v-if и v-for вместе для одного и того же элемента в VueJS?

Приведите пример, демонстрирующий, как можно использовать обработчики событий в VueJS?

Назовите несколько веб-сайтов, использующих VueJS?

Можете ли вы объяснить, что такое однофайловые компоненты в VueJS?

Что такое свойство $parent в VueJS?

Что такое плагин vue?

Обсудите директиву v-cloak в VueJS?

Перечислите некоторые модификаторы событий в VueJS?

Каковы некоторые популярные фреймворки тестирования для VueJS?

Что такое Composition API, и в чем его преимущества по сравнению с Options API?

Как работает реактивность в Vue 3? Расскажите о reactive и ref.

Как использовать watch и watchEffect? Чем они отличаются?

Какие хуки жизненного цикла доступны в Vue 3?

Vuex

Как устроен Vuex? Из каких частей он состоит?

Напишите пример асинхронного действия в Vuex.

Вопросы по Pinia

Чем Pinia отличается от Vuex?

Как создать и использовать хранилище в Pinia?

Как реализовать реактивные геттеры в Pinia?

Nuxt

Описание и преимущества Nuxt js

Какие режимы рендера поддерживает Nuxt.js?

Как в Nuxt.js обрабатываются маршруты?

Чем отличаются asyncData и fetch?

Что такое middleware в Nuxt.js?

Как работает модуль @nuxtjs/axios?

Как работает реактивность в Vue 3? Расскажите о `reactive` и `ref`.

Как использовать `watch` и `watchEffect`? Чем они отличаются?

Чем отличаются `asyncData` и `fetch`?

Как работает модуль `@nuxtjs/axios`?