Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

веб 8-10 лаб

.docx
Скачиваний:
0
Добавлен:
23.06.2025
Размер:
94.11 Кб
Скачать

Подробный разбор кода Vue.js приложения

В предоставленном коде реализовано веб-приложение на Vue.js 3, состоящее из нескольких компонентов. Давайте подробно разберем каждый аспект реализации согласно поставленным заданиям.

1. Подключение библиотеки Vue.js

В данном проекте используется модульная система (вероятно, Vue CLI или Vite), где Vue.js подключается как зависимость в package.json, а не через CDN. Это видно по:

  • Использованию однофайловых компонентов (.vue файлы)

  • Наличию секций <template>, <script> и <style> в каждом компоненте

  • Использованию export default для определения компонентов

2. Связывание элементов (разные типы)

В коде реализованы несколько типов связывания:

Двустороннее связывание (v-model)

html

Copy

Download

Run

<input v-model="contactForm.name">

<input v-model="contactForm.email">

<textarea v-model="contactForm.message">

v-model автоматически синхронизирует данные между input элементами и свойствами компонента.

Одностороннее связывание (интерполяция)

html

Copy

Download

Run

<p>Привет, {{ contactForm.name }}!</p>

<h3>{{ contact.name }}</h3>

Фигурные скобки выводят значение свойства в шаблон.

Связывание атрибутов (v-bind)

html

Copy

Download

Run

<button :disabled="!isFormValid">

Сокращенная форма v-bind:disabled связывает атрибут disabled с вычисляемым свойством isFormValid.

3. Вывод массива данных

В компоненте ContactsView реализован вывод массива team из 10 элементов:

javascript

Copy

Download

team: [

{ name: 'Иван Иванов', position: 'Frontend Developer', ... },

// ... еще 9 объектов

]

Рендеринг осуществляется директивой v-for:

html

Copy

Download

Run

<div v-for="(contact, index) in team" :key="index" class="contact-card">

<h3>{{ contact.name }}</h3>

<p>Должность: {{ contact.position }}</p>

<!-- остальные поля -->

</div>

4. Условная отрисовка

В коде есть два вида условной отрисовки:

v-if

html

Copy

Download

Run

<div v-if="contactForm.name">

<p>Привет, {{ contactForm.name }}!</p>

</div>

Блок показывается только если contactForm.name не пустой.

v-show (в компоненте Home)

html

Copy

Download

Run

<div v-if="showContent">

<p>Секретный контент!</p>

</div>

Разница между v-if и v-show:

  • v-if полностью удаляет/добавляет элемент из DOM

  • v-show просто переключает display: none/block

5. Обработчики событий

В компонентах реализованы обработчики событий:

ContactsView

html

Copy

Download

Run

<button @click="submitForm">

javascript

Copy

Download

methods: {

submitForm() {

alert(`Форма отправлена!\nИмя: ${this.contactForm.name}\n...`);

this.contactForm = { name: '', email: '', message: '' };

}

}

Home

html

Copy

Download

Run

<button @click="toggleShow">

<button @click="showAlert">

javascript

Copy

Download

methods: {

toggleShow() {

this.showContent = !this.showContent;

},

showAlert() {

alert('Событие обработано!');

}

}

Структура компонентов

Приложение состоит из трех компонентов:

  1. ContactsView - страница контактов с формой и списком команды

  2. Home - главная страница с демонстрацией возможностей Vue

  3. About - простая страница "О проекте"

Вычисляемые свойства

В компоненте ContactsView используется вычисляемое свойство:

javascript

Copy

Download

computed: {

isFormValid() {

return this.contactForm.name && this.contactForm.email && this.contactForm.message;

}

}

Оно автоматически обновляется при изменении полей формы и используется для активации/деактивации кнопки отправки.

Подробные ответы на вопросы по Vue.js и практическому заданию

1. Как происходит добавление библиотеки Vue.js?

Способы подключения Vue.js:

  1. CDN (самый простой для быстрого старта):

html

Copy

Download

Run

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  1. Установка через npm (для сложных проектов):

bash

Copy

Download

npm install vue

  1. Использование Vue CLI (для профессиональной разработки):

bash

Copy

Download

npm install -g @vue/cli

vue create my-project

Для нашего задания добавим Vue 3 через CDN:

Добавьте перед закрывающим тегом </body> в вашем HTML-файле:

html

Copy

Download

Run

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>

const { createApp } = Vue;

createApp({

// Здесь будет наше приложение Vue

}).mount('#app');

</script>

И оберните ваш контент в div с id="app":

html

Copy

Download

Run

<div id="app">

<!-- Весь ваш существующий контент -->

</div>

2. Что такое связывание? Какое бывает?

Связывание (Binding) в Vue - это механизм синхронизации данных между JavaScript и DOM.

Основные типы связывания:

  1. Интерполяция (Text Binding):

html

Copy

Download

Run

<p>{{ message }}</p>

  1. Связывание атрибутов (v-bind):

html

Copy

Download

Run

<img v-bind:src="imageSrc" alt="">

<!-- Сокращенная форма -->

<img :src="imageSrc" alt="">

  1. Двустороннее связывание (v-model):

html

Copy

Download

Run

<input v-model="username" type="text">

  1. Связывание классов и стилей:

html

Copy

Download

Run

<div :class="{ active: isActive }"></div>

<div :style="{ color: textColor }"></div>

Пример для задания (свяжем несколько элементов):

javascript

Copy

Download

createApp({

data() {

return {

title: 'Мое Vue-приложение', // Интерполяция

imageUrl: 'logo.png', // v-bind

userName: '', // v-model

isActive: true :class

}

}

}).mount('#app');

3. Как происходит отрисовка списка?

Использование директивы v-for:

Для отображения массива из 10+ элементов:

  1. В компоненте:

javascript

Copy

Download

data() {

return {

products: [

{ id: 1, name: 'Ноутбук', price: 50000 },

{ id: 2, name: 'Смартфон', price: 30000 },

// ... минимум 10 элементов

]

}

}

  1. В шаблоне:

html

Copy

Download

Run

<ul>

<li v-for="product in products" :key="product.id">

{{ product.name }} - {{ product.price }} руб.

</li>

</ul>

Пример для задания (список новостей):

javascript

Copy

Download

data() {

return {

news: [

{ id: 1, title: 'Новость 1', content: 'Текст новости...', published: true },

{ id: 2, title: 'Новость 2', content: 'Текст новости...', published: false },

// ... минимум 10 элементов

]

}

}

html

Copy

Download

Run

<div v-for="item in news" :key="item.id" class="news-item">

<h3>{{ item.title }}</h3>

<p>{{ item.content }}</p>

</div>

4. Что такое условная отрисовка? Какие бывают?

Условная отрисовка - это отображение элементов в зависимости от условий.

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

  1. v-if / v-else-if / v-else:

html

Copy

Download

Run

<div v-if="isAdmin">Админ-панель</div>

<div v-else-if="isModerator">Модератор-панель</div>

<div v-else>Обычный пользователь</div>

  1. v-show (альтернатива v-if):

html

Copy

Download

Run

<div v-show="isVisible">Элемент видим</div>

Разница между v-if и v-show:

  • v-if - полностью удаляет/добавляет элемент из DOM

  • v-show - просто переключает display: none/block

Пример для задания (условная отрисовка):

html

Copy

Download

Run

<div v-if="news.length > 0">

<h2>Список новостей</h2>

<!-- список новостей -->

</div>

<div v-else>

<p>Новостей пока нет</p>

</div>

<button v-show="user.isLoggedIn">Добавить новость</button>

5. Как происходит обработка события?

Использование директивы v-on:

  1. Простой обработчик:

html

Copy

Download

Run

<button v-on:click="handleClick">Нажми меня</button>

<!-- Сокращенная форма -->

<button @click="handleClick">Нажми меня</button>

  1. Методы в компоненте:

javascript

Copy

Download

methods: {

handleClick() {

alert('Кнопка нажата!');

},

handleSubmit(event) {

event.preventDefault();

// Логика обработки

}

}

Пример для задания (обработчик события):

javascript

Copy

Download

createApp({

data() {

return {

counter: 0

}

},

methods: {

incrementCounter() {

this.counter++;

},

showAlert(message) {

alert(message);

}

}

}).mount('#app');

html

Copy

Download

Run

<button @click="incrementCounter">Увеличить счетчик</button>

<button @click="showAlert('Привет!')">Показать приветствие</button>

<p>Счетчик: {{ counter }}</p>

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

Директивы в Vue - это специальные атрибуты с префиксом v-, которые добавляют реактивное поведение DOM.

Основные директивы Vue:

  1. v-text - аналогично {{ }}

html

Copy

Download

Run

<span v-text="message"></span>

  1. v-html - вставка HTML:

html

Copy

Download

Run

<div v-html="rawHtml"></div>

  1. v-bind - связывание атрибутов:

html

Copy

Download

Run

<img v-bind:src="imageUrl">

  1. v-model - двустороннее связывание:

html

Copy

Download

Run

<input v-model="username">

  1. v-for - рендеринг списков:

html

Copy

Download

Run

<li v-for="item in items">{{ item }}</li>

  1. v-if/v-show - условный рендеринг

  2. v-on - обработка событий:

html

Copy

Download

Run

<button v-on:click="doThis">

  1. v-slot - работа со слотами

Примеры пользовательских директив:

javascript

Copy

Download

app.directive('focus', {

mounted(el) {

el.focus();

}

});

html

Copy

Download

Run

<input v-focus>

Подробные ответы на вопросы для зачета

1. Что такое Node.js? Для чего используется?

Node.js — это кроссплатформенная среда выполнения JavaScript, построенная на движке V8, которая позволяет выполнять JavaScript-код вне браузера.

Основные характеристики:

  • Серверная платформа: Позволяет создавать серверные приложения на JavaScript

  • Асинхронная и событийно-ориентированная архитектура: Использует неблокирующий ввод/вывод

  • Однопоточная модель: С event loop для обработки множества соединений

  • NPM (Node Package Manager): Крупнейшая экосистема открытых библиотек

Для чего используется Node.js:

  1. Серверная разработка:

    • Веб-серверы и API (REST, GraphQL)

    • Микросервисная архитектура

    • Реaltime-приложения (чаты, уведомления)

  2. Инструменты разработки:

    • Сборщики проектов (Webpack, Vite)

    • Утилиты командной строки

    • Тестовые среды (Jest, Mocha)

  3. Специализированные задачи:

    • Обработка файлов и потоков данных

    • Скриптинг и автоматизация

    • Серверный рендеринг (SSR) для SPA

Пример простого HTTP-сервера:

javascript

Copy

Download

const http = require('http');

const server = http.createServer((req, res) => {

res.statusCode = 200;

res.end('Hello, World!');

});

server.listen(3000);

2. Как происходит установка пакетов в Node.js?

Установка пакетов осуществляется через npm (Node Package Manager) или yarn.

Основные команды:

  1. Инициализация проекта:

bash

Copy

Download

npm init

Создает файл package.json с метаданными проекта.

  1. Установка пакета:

bash

Copy

Download

npm install имя_пакета

  • Пакет скачивается в node_modules/

  • Запись добавляется в package.json (с флагом --save)

  • Типы зависимостей:

    • npm install --save (обычные зависимости, по умолчанию)

    • npm install --save-dev (devDependencies - для разработки)

    • npm install -g (глобальная установка)

  • Установка всех зависимостей проекта:

    bash

    Copy

    Download

    npm install

    Читает package.json и устанавливает все указанные пакеты.

    Особенности:

    • Версионность: семантическое версионирование (^1.2.3, ~1.2.3)

    • package-lock.json - фиксирует точные версии зависимостей

    • Альтернативы: yarn, pnpm (более быстрые/эффективные менеджеры)

    3. В чем отличие старой структуры ИС от новой?

    Старая структура (монолитная):

    1. Архитектура:

      • Единая кодовая база

      • Тесно связанные компоненты

      • Общая база данных

    2. Особенности:

      • Сложность масштабирования

      • Единый процесс развертывания

      • Зависимость между модулями

    3. Технологии:

      • PHP (Laravel, Symfony)

      • Ruby on Rails

      • Java Spring

    Новая структура (микросервисная/компонентная):

    1. Архитектура:

      • Разделение на независимые сервисы/компоненты

      • Слабая связанность

      • Каждый сервис со своей БД

    2. Особенности:

      • Горизонтальное масштабирование

      • Независимое развертывание

      • Полиглот-разработка

    3. Технологии:

      • Node.js + Express/Nest

      • Docker + Kubernetes

      • API Gateway

    Ключевые отличия:

    Характеристика

    Старая структура

    Новая структура

    Масштабируемость

    Вертикальная

    Горизонтальная

    Развертывание

    Полное приложение

    Независимые сервисы

    Гибкость

    Низкая

    Высокая

    Сложность разработки

    Проще на начальном этапе

    Сложнее из-за распределенности

    Отказоустойчивость

    Единая точка отказа

    Локальные отказы

    4. Что такое компонент?

    Компонент — это независимый, переиспользуемый блок кода, который инкапсулирует определенную функциональность и интерфейс.

    В контексте современных ИС:

    1. Frontend-компоненты (Vue/React/Angular):

      • Сочетание HTML, CSS и JavaScript

      • Пример из Vue:

    html

    Copy

    Download

    Run

    <template>

    <button @click="count++">{{ count }}</button>

    </template>

    <script>

    export default {

    data() { return { count: 0 } }

    }

    </script>

    1. Backend-компоненты:

      • Микросервисы

      • Модули (Node.js модули, Java-пакеты)

      • Сервисные классы

    Характеристики хорошего компонента:

    1. Инкапсуляция:

      • Скрывает внутреннюю реализацию

      • Предоставляет четкий интерфейс

    2. Переиспользуемость:

      • Независимость от контекста

      • Настраиваемость через props/параметры

    3. Ответственность:

      • Делает одну вещь и делает это хорошо

      • Минимальная зависимость от других компонентов

    Пример компонентной архитектуры во Vue:

    javascript

    Copy

    Download

    // ParentComponent.vue

    <template>

    <ChildComponent :items="list" @select="handleSelect" />

    </template>

    // ChildComponent.vue

    <template>

    <ul>

    <li v-for="item in items" @click="$emit('select', item.id)">

    {{ item.name }}

    </li>

    </ul>

    </template>

    <script>

    export default {

    props: ['items'],

    emits: ['select']

    }

    </script>

    Преимущества компонентного подхода:

    • Упрощение разработки сложных интерфейсов

    • Возможность повторного использования кода

    • Упрощение тестирования

    • Более понятная структура проекта

    • Параллельная разработка разных частей системы

    Вопросы для оценки самостоятельной работы:

    1. В чем заключается принцип SPA?

    2. Что такое роутинг?

    3. Что такое пайпы?

    4. Что такое модули?

    5. В чем отличие разработки клиентской части ИС с node.js и без нее?

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

    Марти 🦓 | ChatGPT + DeepSeek, [05.05.2025 15:15]

    Беседа № 25:

    Выбрана Ваша роль: Программист

    Давайте подробно объясним, как работает роутинг в проекте на Vue.js с использованием библиотеки Vue Router.

    ### Что такое роутинг?

    Роутинг — это механизм, который позволяет управлять навигацией в приложении, основываясь на URL. Он определяет, какой компонент будет отображен на странице в зависимости от текущего URL. В Vue.js для этого часто используется библиотека vue-router.

    ### 1. Импорт необходимых модулей

    import { createRouter, createWebHistory } from 'vue-router';

    import HomeView from '../views/HomeView.vue';

    - createRouter: Функция, которая создает новый экземпляр маршрутизатора.

    - createWebHistory: Функция, которая создает уровень истории для использования URL, основанных на браузере (например, без # в адресной строке).

    - HomeView: Импортируем основной компонент, который будет отображаться на главной странице (по умолчанию).

    ### 2. Определение маршрутов

    const routes = [

    {

    path: '/',

    name: 'home',

    component: HomeView

    },

    {

    path: '/about',

    name: 'about',

    component: () => import('../views/AboutView.vue')

    },

    {

    path: '/contacts',

    name: 'contacts',

    component: () => import('../components/ContactsView.vue')

    }

    ];

    #### Разбор каждого маршрута:

    - path: Определяет путь в URL, по которому будет доступен данный маршрут.

    - name: Имя маршрута. Оно может быть использовано для навигации и ссылок.

    - component: Компонент, который будет загружен при переходе по данному маршруту.

    - Для главного маршрута / (домашняя страница) компонент импортируется заранее.

    - Для маршрутов /about и /contacts компоненты загружаются динамически с помощью функции () => import(...). Это помогает уменьшить размер приложения, так как компоненты загружаются только тогда, когда это необходимо (ленивая загрузка).

    ### 3. Создание экземпляра роутера

    const router = createRouter({

    history: createWebHistory(),

    routes

    });

    - Создаем экземпляр маршрутизатора с установленной историей на основе веб-истории (без использования #). Это значит, что пользователь будет видеть чистый и понятный URL.

    - routes: передаем массив маршрутов, который мы определили ранее.

    ### 4. Экспорт экземпляра роутера

    export default router;

    - Экспортируем созданный маршрутизатор, чтобы его можно было использовать в основном файле приложения.

    ### 5. Использование роутера в приложении

    В файле main.js:

    import { createApp } from 'vue';

    import App from './App.vue';

    import router from './router';

    const app = createApp(App);

    app.use(router);

    app.mount('#app');

    - createApp(App): Создание экземпляра Vue приложения с корневым компонентом App.vue.

    - app.use(router): Подключаем router к приложению, что позволяет использовать роутинг внутри компонентов.

    - app.mount('#app'): Монтируем приложение в элемент с id app в DOM.

    ### 6. Использование роутера в компонентах

    В вашем компоненте App.vue вы видите следующий код:

    <template>

    <div id="app">

    <nav>

    <router-link to="/">Главная</router-link> |

    <router-link to="/about">О нас</router-link> |

    <router-link to="/contacts">Контакты</router-link>

    </nav>

    <router-view/>

    </div>

    </template>

    #### Объяснение:

    - <router-link>: Специальный компонент, который позволяет создать ссылку для навигации по определенным маршрутам. При клике на эту ссылку происходит переход на указанный маршрут без перезагрузки страницы:

    - to="/" — навигация на главную страницу.

    - to="/about" — навигация на страницу "О нас".

    - to="/contacts" — навигация на страницу "Контакты".

    Марти 🦓 | ChatGPT + DeepSeek, [05.05.2025 15:16]

    - <router-view/>: Компонент, который будет отображать текущий компонент из маршрута. Когда пользователь переходит по ссылкам, содержимое <router-view/> будет меняться в зависимости от маршрута.

    ### 7. Общий процесс навигации

    Когда пользователь кликает на одну из ссылок:

    1. Vue Router определяет, какой маршрут соответствует этому URL.

    2. Компонент, связанный с маршрутом, загружается и отображается внутри <router-view>.

    3. URL в адресной строке обновляется, но страница не перезагружается — это позволяет создать более плавный и современный пользовательский интерфейс.

    ### Заключение

    Таким образом, маршрутизатор Vue позволяет легко управлять маршрутизацией в приложении, что важно для создания отзывчивых и организованных одностраничных приложений (SPA). Вы можете добавлять новые маршруты и настраивать их в любое время, а Vue Router позаботится о том, чтобы все работало без проблем и с минимальными усилиями.

    Если у вас есть дополнительные вопросы о конкретной части кода или о других аспектах использования Vue Router, пожалуйста, дайте знать!

    13432 из 16384

    Подробные ответы на вопросы для зачета

    1. В чем заключается принцип SPA?

    SPA (Single Page Application) - это веб-приложение, которое загружает единственную HTML-страницу и динамически обновляет её содержимое по мере взаимодействия пользователя с приложением.

    Основные принципы SPA:

    1. Единая загрузка страницы:

      • Первоначально загружается только один HTML-документ

      • Все ресурсы (JS, CSS) загружаются вместе с этой страницей или динамически

    2. Динамическое обновление контента:

      • Контент подгружается и отображается динамически через AJAX/Fetch

      • Нет полных перезагрузок страницы при навигации

    3. Клиентский рендеринг:

      • Большая часть логики выполняется на стороне клиента

      • Браузер отвечает за рендеринг контента

    4. История навигации:

      • Используется History API для изменения URL без перезагрузки

      • Поддержка кнопок "Назад"/"Вперед" браузера

    5. Разделение данных и представления:

      • Четкое разделение между данными (API) и их отображением

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

    • Более плавный пользовательский опыт (нет мерцания при переходах)

    • Меньшая нагрузка на сервер (рендеринг на клиенте)

    • Возможность оффлайн-работы (с Service Workers)

    • Легче разрабатывать сложные интерактивные интерфейсы

    Недостатки SPA:

    • Долгая первоначальная загрузка

    • Проблемы с SEO (решаются SSR)

    • Требует больше ресурсов клиента

    Пример SPA-фреймворков: Angular, React, Vue.js

    2. Что такое роутинг?

    Роутинг - это механизм определения того, какой контент/компонент должен отображаться в зависимости от URL в адресной строке браузера.

    В веб-разработке:

    1. Клиентский роутинг (в SPA):

      • Обрабатывается JavaScript на стороне клиента

      • Использует History API или хэш (#)

      • Пример (Vue Router):

    javascript

    Copy

    Download

    const routes = [

    { path: '/', component: Home },

    { path: '/about', component: About }

    ]

    1. Серверный роутинг:

      • Обрабатывается сервером (Express, Laravel и др.)

      • Возвращает разные HTML-страницы

      • Пример (Express.js):

    javascript

    Copy

    Download

    app.get('/', (req, res) => res.render('home'));

    app.get('/about', (req, res) => res.render('about'));

    Основные концепции роутинга:

    • Маршруты (Routes) - соответствие URL и компонента/контроллера

    • Параметры маршрута - динамические части URL (/users/:id)

    • Вложенные маршруты - иерархическая структура

    • Навигационные хуки - middleware для маршрутов

    • Ленивая загрузка - загрузка кода только при необходимости

    3. Что такое пайпы?

    Пайпы (Pipes) - это инструменты для преобразования данных прямо в шаблоне перед их отображением. В Angular называются "pipes", в Vue - "filters".

    Основные характеристики:

    1. Преобразование данных:

      • Форматирование дат, чисел, валют

      • Фильтрация/сортировка массивов

      • Преобразование регистра и т.д.

    2. Синтаксис:

      • Angular: {{ value | pipeName }}

      • Vue 2: {{ value | filterName }} (во Vue 3 заменены на computed/methods)

    3. Чистые и нечистые:

      • Чистые (pure) - пересчитываются только при изменении входных данных

      • Нечистые (impure) - пересчитываются при каждом изменении детекта

    Примеры:

    Angular:

    typescript

    Copy

    Download

    // Создание пайпа

    @Pipe({ name: 'reverse' })

    export class ReversePipe implements PipeTransform {

    transform(value: string): string {

    return value.split('').reverse().join('');

    }

    }

    // Использование

    <p>{{ 'Hello' | reverse }}</p> <!-- Выведет: olleH -->

    Vue 2:

    javascript

    Copy

    Download

    // Фильтр

    filters: {

    capitalize(value) {

    return value.charAt(0).toUpperCase() + value.slice(1);

    }

    }

    // Использование

    <p>{{ 'hello' | capitalize }}</p> <!-- Выведет: Hello -->

    4. Что такое модули?

    Модули - это способ организации кода в логические блоки, которые инкапсулируют связанную функциональность.

    В JavaScript/TypeScript:

    1. ES-модули (ESM):

    javascript

    Copy

    Download

    // export модуля

    export function sum(a, b) { return a + b; }

    // import модуля

    import { sum } from './math';

    1. CommonJS (Node.js):

    javascript

    Copy

    Download

    // export

    module.exports = { sum: (a, b) => a + b };

    // import

    const { sum } = require('./math');

    Во фреймворках:

    Angular:

    typescript

    Copy

    Download

    @NgModule({

    declarations: [AppComponent], // компоненты, директивы, пайпы

    imports: [BrowserModule], // другие модули

    providers: [UserService], // сервисы

    bootstrap: [AppComponent] // корневой компонент

    })

    export class AppModule {}

    Vue:

    • Меньше формальных модулей, больше файлов-компонентов

    • Можно организовать через Vuex-модули (для хранилища)

    Преимущества модулей:

    • Инкапсуляция кода

    • Повторное использование

    • Ленивая загрузка

    • Упрощение тестирования

    5. В чем отличие разработки клиентской части ИС с Node.js и без нее?

    С Node.js:

    1. Серверный рендеринг (SSR):

      • Next.js (React), Nuxt.js (Vue)

      • Лучше для SEO

      • Более быстрая первоначальная загрузка

    2. Универсальный JavaScript:

      • Один язык на клиенте и сервере

      • Возможность шаринга кода (валидации, типы и т.д.)

    3. Инструменты разработки:

      • Webpack, Babel, ESLint работают на Node.js

      • Возможность использовать npm/yarn пакеты

    4. Proxy и middleware:

      • Легко настраивать прокси для API

      • Обработка запросов перед отправкой на клиент

    Без Node.js (чистый клиент):

    1. Статические файлы:

      • Просто раздавать с любого сервера (Nginx, Apache)

      • Нет необходимости в серверном JS

    2. Ограниченные возможности:

      • Нет SSR

      • Сложнее с SEO

      • Нет доступа к файловой системе и серверным API

    3. Простота развертывания:

      • Можно хостить на GitHub Pages, Netlify

      • Нет необходимости в серверной инфраструктуре

    Сравнение:

    Характеристика

    С Node.js

    Без Node.js

    Рендеринг

    SSR + CSR

    Только CSR

    SEO

    Оптимизировано

    Ограничено

    Инструменты

    Полный стек

    Только клиентские

    Сложность

    Выше

    Ниже

    Масштабируемость

    Гибче

    Ограниченнее

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

    Основные способы:

    1. Сверху вниз (Parent → Child):

      • Через props (входные параметры)

    vue

    Copy

    Download

    <!-- Parent -->

    <Child :title="parentTitle" />

    <!-- Child -->

    <script>

    export default {

    props: ['title']

    }

    </script>

    1. Снизу вверх (Child → Parent):

      • Через события ($emit)

    vue

    Copy

    Download

    <!-- Child -->

    <button @click="$emit('update', newValue)">Click</button>

    <!-- Parent -->

    <Child @update="handleUpdate" />

    1. Между любыми компонентами:

      • Глобальное хранилище (Vuex, Pinia, Redux)

    javascript

    Copy

    Download

    // Хранилище

    state: { count: 0 },

    mutations: { increment(state) { state.count++ } }

    // Любой компонент

    this.$store.commit('increment');

    • Шина событий (менее рекомендуемо)

    javascript

    Copy

    Download

    // EventBus.js

    import Vue from 'vue';

    export default new Vue();

    // Компонент A

    EventBus.$emit('event-name', data);

    // Компонент B

    EventBus.$on('event-name', handler);

    1. Через ссылки (для прямого доступа):

    vue

    Copy

    Download

    <Child ref="childComp" />

    <script>

    export default {

    methods: {

    callChildMethod() {

    this.$refs.childComp.childMethod();

    }

    }

    }

    </script>

    1. Provide/Inject (для глубоко вложенных компонентов):

    javascript

    Copy

    Download

    // Предок

    export default {

    provide() {

    return { theme: this.theme }

    }

    }

    // Потомок (любой уровень вложенности)

    export default {

    inject: ['theme']

    }

    Выбор способа зависит от:

    • Уровня вложенности компонентов

    • Частоты обновления данных

    • Сложности приложения

    • Необходимости поддержки и тестирования

  • Соседние файлы в предмете Web технологии