Как работают map, reduce и filter ?
Спросят с вероятностью 7%

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

Метод map

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

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию.
✅Возвращает новый массив с результатами вызова функции для каждого элемента.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

В этом примере функция умножает каждый элемент массива numbers на 2, и результат сохраняется в новом массиве doubled.

Метод reduce

Применяется к массиву и сводит его к одному значению. Функция принимает аккумулятор и текущий элемент, производит операцию и возвращает новый аккумулятор.

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию, которая обновляет аккумулятор.
✅Возвращает единственное значение — аккумулятор.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10

Здесь reduce суммирует все элементы массива, начиная с аккумулятора, равного 0.

Метод filter

Создает новый массив, содержащий все элементы исходного массива, для которых функция-условие возвращает true.

Как он работает

✅Итерирует по каждому элементу массива.
✅Применяет к каждому элементу функцию-условие.
✅Возвращает новый массив с элементами, прошедшими условие.

const numbers = [1, 2, 3, 4];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4]

В этом примере filter создает новый массив, содержащий только четные числа из массива numbers.

✅map: создает новый массив, преобразуя каждый элемент по заданной функции.
✅reduce: сводит массив к одному значению, применяя функцию к каждому элементу.
✅filter: создает новый массив, содержащий только элементы, которые соответствуют условию.

Все три метода делают код более читаемым и декларативным, облегчая работу с массивами.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что такое стрелочная функция ?
Спросят с вероятностью 7%

Стрелочная функция (arrow function) — это сокращённый синтаксис для создания функций, введённый в стандарте ES6 (ECMAScript 2015). Стрелочные функции имеют компактный синтаксис и обладают некоторыми особенностями в отношении контекста this.

Зачем они нужны

Полезны для:
1️⃣Упрощения записи функций.
2️⃣Автоматического привязывания контекста this к окружению, в котором они были созданы (лексическое привязывание).

Синтаксис

Синтаксис стрелочной функции:

const функция = (аргументы) => {
  // тело функции
};

Примеры

1️⃣Функция без аргументов:

const sayHello = () => {
     console.log('Hello!');
   };

2️⃣Функция с одним аргументом:

const double = num => num * 2;

3️⃣Функция с несколькими аргументами:

const add = (a, b) => a + b;

4️⃣Функция с телом, содержащим несколько выражений:

      const sumAndLog = (a, b) => {
     const result = a + b;
     console.log(result);
     return result;
   };

Особенности

1️⃣Лексическое привязывание this: В стрелочных функциях this привязывается к контексту, в котором функция была определена. Это отличие от обычных функций, где this определяется в момент вызова функции.

      function Person() {
     this.age = 0;
   
     setInterval(() => {
       this.age++;
       console.log(this.age);
     }, 1000);
   }
   
   const person = new Person();
   

В этом примере стрелочная функция внутри setInterval использует this от внешней функции Person, что позволяет корректно увеличивать значение age.

2️⃣Отсутствие своего this, arguments, super и new.target: Стрелочные функции не имеют своих собственных версий этих объектов, что делает их непригодными в некоторых случаях, например, при использовании в качестве методов объекта.

3️⃣Нельзя использовать как конструкторы: Стрелочные функции нельзя использовать с оператором new.

const MyFunc = () => {};
   const instance = new MyFunc(); // Ошибка: MyFunc не является конструктором

Стрелочная функция — это короткий синтаксис для создания функций в JavaScript, который автоматически привязывает this к контексту, в котором она была создана. Они удобны для коротких функций и ситуаций, где требуется лексическое привязывание this.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Зачем нужен виртуальный дом ?
Спросят с вероятностью 7%

Виртуальный DOM (Virtual DOM) — это концепция, используемая в современных фреймворках и библиотеках, таких как React, для оптимизации и ускорения работы с реальным DOM. Реальный DOM медленный при частых изменениях, поэтому виртуальный DOM решает эту проблему, делая процесс более эффективным.

Зачем он нужен

1️⃣Улучшение производительности: Значительно уменьшает количество прямых манипуляций с реальным DOM, которые являются дорогостоящими с точки зрения производительности.
2️⃣Упрощение разработки: Работая с ним, можно более эффективно управлять состоянием приложения и его представлением, абстрагируясь от непосредственной работы с реальным DOM.

Как он работает

1️⃣Создание: Когда состояние приложения меняется, создаётся новый виртуальный DOM, представляющий обновлённое состояние.
2️⃣Сравнение: Сравниваются старый и новый виртуальные DOM, чтобы определить, какие части реального DOM нужно обновить. Этот процесс называется "диффинг" (diffing).
3️⃣Минимальные: После сравнения, в реальный DOM вносятся только необходимые изменения, что значительно снижает количество операций с ним.

Примеры

С React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

export default Counter;

В этом примере при каждом изменении состояния count React создаёт новый виртуальный DOM, затем сравнивает его с предыдущим виртуальным DOM и применяет только те изменения, которые необходимы для реального DOM.

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

1️⃣Повышение производительности: Благодаря уменьшению количества прямых операций с реальным DOM.
2️⃣Кроссбраузерная совместимость: Виртуальный DOM позволяет абстрагироваться от специфичных для браузера особенностей работы с DOM.
3️⃣Лёгкость обновлений и рендеринга: Использование виртуального DOM делает процесс обновления интерфейса приложения более предсказуемым и управляемым.

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Назови компоненты жизненного цикл ?
Спросят с вероятностью 7%

Жизненный цикл компонента состоит из нескольких этапов, которые можно разделить на три основные фазы: монтирование, обновление и размонтирование. Каждый из этих этапов включает в себя определённые методы цикла.

1️⃣Монтирование (Mounting):
✅constructor(): Вызывается перед монтированием компонента. Обычно используется для инициализации состояния и привязки методов.
✅staticgetDerivedStateFromProps(props, state): Вызывается перед рендером компонента как при монтировании, так и при обновлении. Используется для синхронизации состояния с пропсами.
✅render(): Обязательный метод, который возвращает JSX-разметку компонента.
✅componentDidMount(): Вызывается сразу после монтирования компонента. Здесь можно выполнять запросы к API или подписываться на события.

2️⃣Обновление (Updating):
✅staticgetDerivedStateFromProps(props, state): Как и при монтировании, вызывается перед рендером компонента для синхронизации состояния с пропсами.
✅shouldComponentUpdate(nextProps, nextState): Определяет, нужно ли компоненту перерисовываться. Можно использовать для оптимизации производительности.
✅render(): Ререндер компонента на основе новых пропсов или состояния.
✅getSnapshotBeforeUpdate(prevProps, prevState): Вызывается прямо перед тем, как изменённый DOM будет отображен. Полезно для сохранения информации о DOM, которая может измениться после обновления.
✅componentDidUpdate(prevProps, prevState, snapshot): Вызывается сразу после обновления компонента. Можно использовать для выполнения действий после обновления, таких как запросы к API на основе новых пропсов или состояния.

3️⃣Размонтирование (Unmounting):
✅componentWillUnmount(): Вызывается перед размонтированием и удалением компонента. Используется для очистки ресурсов, таких как таймеры, подписки или запросы.

Пример:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // Синхронизация состояния с пропсами
    if (nextProps.count !== prevState.count) {
      return { count: nextProps.count };
    }
    return null;
  }

  componentDidMount() {
    // Выполнение действий после монтирования
    console.log('Component mounted');
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Оптимизация перерисовки
    return nextState.count !== this.state.count;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Сохранение информации о DOM
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Выполнение действий после обновления
    console.log('Component updated');
  }

  componentWillUnmount() {
    // Очистка ресурсов перед удалением компонента
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

Жизненный цикл компонента включает три фазы: монтирование, обновление и размонтирование. В каждой фазе есть свои методы, которые выполняют определенные действия для управления состоянием и поведением компонента.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что такое redux ?
Спросят с вероятностью 7%

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

Основные концепции:

1️⃣Хранилище (Store):
Хранилище — это объект, который содержит всё состояние приложения. В Redux может быть только одно хранилище. Оно создается с помощью функции createStore.

      import { createStore } from 'redux';
   const store = createStore(reducer);
   

2️⃣Действия (Actions):
Действия — это объекты, которые описывают изменения состояния. Каждое действие имеет тип (свойство type), который указывает, какое изменение должно произойти, и дополнительные данные (payload), если это необходимо.

      const incrementAction = {
     type: 'INCREMENT',
     payload: 1
   };
   

3️⃣Редюсеры (Reducers):
Редюсеры — это функции, которые определяют, как состояние приложения изменяется в ответ на действия. Они принимают текущее состояние и действие, а возвращают новое состояние.

      const initialState = { count: 0 };

   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, count: state.count + action.payload };
       case 'DECREMENT':
         return { ...state, count: state.count - action.payload };
       default:
         return state;
     }
   }
   

4️⃣Диспетчеризация (Dispatch):
Для изменения состояния приложения необходимо отправить действие в хранилище с помощью метода dispatch.

store.dispatch(incrementAction);

5️⃣Подписка (Subscription):
Приложение может подписываться на изменения состояния в хранилище, чтобы обновлять интерфейс пользователя при изменении состояния.

      store.subscribe(() => {
     console.log(store.getState());
   });
   

Пример с React:

1️⃣Установка Redux и React-Redux:

npm install redux react-redux

2️⃣Создание хранилища и редюсера:

      // store.js
   import { createStore } from 'redux';

   const initialState = { count: 0 };

   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, count: state.count + 1 };
       case 'DECREMENT':
         return { ...state, count: state.count - 1 };
       default:
         return state;
     }
   }

   const store = createStore(counterReducer);
   export default store;
   

3️⃣Подключение хранилища к React приложению:

      // index.js
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import App from './App';
   import store from './store';

   ReactDOM.render(
     <Provider store={store}>
       <App />
     </Provider>,
     document.getElementById('root')
   );
   

4️⃣Использование состояния и действий в компонентах:

      // App.js
   import React from 'react';
   import { useSelector, useDispatch } from 'react-redux';

   function App() {
     const count = useSelector(state => state.count);
     const dispatch = useDispatch();

     return (
       <div>
         <p>Count: {count}</p>
         <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
       </div>
     );
   }

   export default App;
   

Redux — это библиотека для управления состоянием приложениях. Она использует хранилище для состояния, действия для описания изменений, редюсеры для обработки этих изменений и диспетчеризацию для применения действий.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Зачем нужен redux ?
Спросят с вероятностью 7%

Redux нужен для управления состоянием в JavaScript-приложениях, особенно когда они становятся крупными и сложными. Вот несколько причин, почему он полезен:

1️⃣Централизованное управление состоянием
Redux хранит всё состояние приложения в одном месте, называемом хранилищем (store). Это облегчает управление состоянием и делает его предсказуемым.

2️⃣Предсказуемость состояния
Благодаря строгим правилам (например, редюсеры должны быть чистыми функциями), состояние в Redux меняется предсказуемо. Это упрощает отладку и тестирование приложения.

3️⃣Удобная отладка
Существуют инструменты, такие как Redux DevTools, которые позволяют видеть, как состояние изменяется с каждым действием. Это делает отладку проще и более наглядной.

4️⃣Управление сложным состоянием
В больших приложениях состояние может быть очень сложным и распределённым по многим компонентам. Redux помогает управлять этим состоянием, избегая "пробрасывания" пропсов через многие уровни компонентов.

5️⃣Упрощение синхронных и асинхронных операций
Redux хорошо сочетается с middleware, такими как Redux Thunk или Redux Saga, для обработки асинхронных операций, например, запросов к API. Это позволяет управлять побочными эффектами централизованно.

Пример:

1️⃣Централизованное хранилище:
Все состояния приложения хранятся в одном месте, что упрощает управление ими.

      import { createStore } from 'redux';
   const store = createStore(reducer);
   

2️⃣Предсказуемость:
Каждый редюсер — чистая функция, которая принимает текущее состояние и действие и возвращает новое состояние.

      function reducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { count: state.count + 1 };
       case 'DECREMENT':
         return { count: state.count - 1 };
       default:
         return state;
     }
   }
   

3️⃣Отладка:
Использование Redux DevTools позволяет видеть историю изменений состояния и отладку приложения.

      // Подключение Redux DevTools
   const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
   

4️⃣Асинхронные операции:
С помощью middleware, таких как Redux Thunk, можно обрабатывать асинхронные действия.

      import thunk from 'redux-thunk';
   import { applyMiddleware, createStore } from 'redux';

   const store = createStore(reducer, applyMiddleware(thunk));

   // Асинхронное действие
   const fetchData = () => {
     return async (dispatch) => {
       const response = await fetch('https://api.example.com/data');
       const data = await response.json();
       dispatch({ type: 'DATA_LOADED', payload: data });
     };
   };
   

Redux нужен для централизованного, предсказуемого управления состоянием в больших и сложных JavaScript-приложениях. Он облегчает отладку, управление сложным состоянием и асинхронные операции.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Что происходит в момент запроса в браузере ?
Спросят с вероятностью 3%

Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. Рассмотрим основные этапы, происходящие при выполнении HTTP-запроса в браузере:

1️⃣Ввод URL и начало запроса

✅Пользователь вводит URL в адресную строку браузера.
✅Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы.

2️⃣DNS-разрешение

✅Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера.

3️⃣Установление TCP-соединения

После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие:
✅Браузер отправляет SYN-пакет серверу.
✅Сервер отвечает SYN-ACK пакетом.
✅Браузер отправляет ACK-пакет, подтверждая установление соединения.

4️⃣HTTPS и SSL/TLS

✅Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS:
✅Браузер и сервер обмениваются сертификатами и выполняют шифрование данных.

5️⃣Отправка HTTP-запроса

✅Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com
     

6️⃣Обработка запроса на сервере

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

7️⃣Получение и обработка HTTP-ответа

✅Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>
     

8️⃣Парсинг и рендеринг страницы

✅Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы.
✅В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки.

9️⃣Выполнение JavaScript

✅После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы.
✅JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки.

🔟Финальная отрисовка

✅После загрузки всех ресурсов и выполнения JavaScript браузер завершает отрисовку страницы. Пользователь видит конечный результат в своем браузере.

Когда пользователь вводит URL в браузере и нажимает Enter, происходит следующее:
1️⃣Браузер проверяет кэш и выполняет DNS-запрос для получения IP-адреса.
2️⃣Устанавливается TCP-соединение и, если используется HTTPS, SSL/TLS-соединение.
3️⃣Отправляется HTTP-запрос к серверу.
4️⃣Сервер обрабатывает запрос и возвращает HTTP-ответ.
5️⃣Браузер парсит HTML, загружает и обрабатывает ресурсы (CSS, JavaScript, изображения), строит DOM и CSSOM.
6️⃣Выполняется JavaScript, что может изменять DOM и CSSOM.
7️⃣Страница рендерится и отображается пользователю.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Как работает реактивность в vue.Js ?
Спросят с вероятностью 7%

Реактивность — это одна из ключевых характеристик фреймворка, которая позволяет автоматически обновлять пользовательский интерфейс при изменении состояния. Вот как это работает:

Основные концепции

1️⃣Реактивные данные:
Vue использует объекты с реактивными свойствами, чтобы отслеживать изменения. Когда данные изменяются, Vue автоматически обновляет связанные с ними компоненты.

2️⃣Объект Vue:
При создании нового экземпляра Vue, он делает все данные, определенные в опции data, реактивными.

      var vm = new Vue({
     data: {
       message: 'Hello Vue!'
     }
   });
   

3️⃣Реактивность через геттеры и сеттеры:
Vue использует JavaScript Proxy (или Object.defineProperty в более старых версиях) для создания реактивных свойств. Каждый раз, когда свойство считывается, вызывается геттер, и когда свойство изменяется, вызывается сеттер.

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

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

При изменении vm.message интерфейс автоматически обновится:

vm.message = 'Hello World!';

Как это работает "под капотом"

1️⃣Инициализация:
При инициализации Vue.js обходит все свойства объекта data и преобразует их в геттеры и сеттеры с помощью Object.defineProperty. Этот процесс называется обсервацией.

2️⃣Детекторы изменений (Observers):
Каждый раз, когда создается реактивное свойство, создается объект наблюдателя (Observer), который следит за изменениями этого свойства.

3️⃣Депенденси трекинг (Dependency Tracking):
Во время рендера компонента, Vue регистрирует все зависимости (реактивные свойства), которые используются. Это означает, что Vue "запоминает", какие свойства нужно отслеживать для каждого компонента.

4️⃣Реактивное обновление:
Когда реактивное свойство изменяется, Vue уведомляет все компоненты, которые зависят от этого свойства, и они автоматически перерисовываются.

Реактивные системы в действиях

new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum() {
      return this.a + this.b;
    }
  },
  watch: {
    a(newValue, oldValue) {
      console.log(`a изменилось с ${oldValue} на ${newValue}`);
    }
  }
});

✅Вычисляемые свойства: sum автоматически пересчитывается, когда a или b изменяются.
✅Наблюдатели (watchers): Реагируют на изменения данных и могут выполнять побочные эффекты.

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

1️⃣Простота использования: Можно сосредоточиться на логике приложения, а не на обновлении DOM.
2️⃣Высокая производительность: Vue эффективно отслеживает изменения и обновляет только те части DOM, которые изменились.
3️⃣Поддержка сложных приложений: Реактивная система Vue легко масштабируется для больших и сложных приложений.

Реактивность позволяет автоматически обновлять интерфейс при изменении данных. Она работает с использованием геттеров и сеттеров для отслеживания изменений и обновления связанных компонентов.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых

Расскажите о жизненном цикле компонента vue ?
Спросят с вероятностью 7%

Жизненный цикл компонента Vue.js описывает последовательность этапов, через которые проходит компонент от момента его создания до удаления. Каждый этап жизненного цикла сопровождается вызовом определенных хуков (методов), которые можно использовать для выполнения необходимых операций.

Основные этапы:

1️⃣Создание (Creation):
✅beforeCreate(): Вызывается сразу после инициализации экземпляра, до того как будут установлены реактивные свойства. На этом этапе к экземпляру нельзя получить доступ через this.
✅created(): Вызывается после создания экземпляра и установки реактивных свойств. На этом этапе уже можно получить доступ к данным и методам компонента, но ещё нет привязки к DOM.

        new Vue({
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
        console.log(this.message); // 'Hello Vue!'
      }
    });
    

2️⃣Монтирование (Mounting):
✅beforeMount(): Вызывается перед монтированием компонента в DOM. На этом этапе шаблон ещё не скомпилирован и не вставлен в DOM.
✅mounted(): Вызывается после монтирования компонента в DOM. Здесь уже можно выполнять действия, зависящие от DOM, например, инициализировать сторонние библиотеки, работающие с DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeMount() {
        console.log('beforeMount');
      },
      mounted() {
        console.log('mounted');
        console.log(this.$el); // доступ к элементу DOM
      }
    });
    

3️⃣Обновление (Updating):
✅beforeUpdate(): Вызывается перед обновлением DOM, когда изменяется реактивное свойство. На этом этапе можно получить текущее состояние до обновления.
✅updated(): Вызывается после обновления DOM. Этот хук можно использовать для выполнения действий, зависящих от нового состояния DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUpdate() {
        console.log('beforeUpdate');
      },
      updated() {
        console.log('updated');
      },
      methods: {
        updateMessage() {
          this.message = 'Hello World!';
        }
      }
    });
    

4️⃣Размонтирование (Unmounting):
✅beforeUnmount(): Вызывается перед размонтированием компонента и его удалением из DOM. Используется для выполнения очистки, например, отмены таймеров или отписки от событий.
✅unmounted(): Вызывается после того, как компонент был размонтирован и удалён из DOM.

        new Vue({
      el: '#app',
      data() {
        return {
          message: 'Hello Vue!'
        };
      },
      beforeUnmount() {
        console.log('beforeUnmount');
      },
      unmounted() {
        console.log('unmounted');
      },
      methods: {
        destroyComponent() {
          this.$destroy();
        }
      }
    });
    

Жизненный цикл компонента Vue.js включает создание, монтирование, обновление и размонтирование. Каждый этап сопровождается вызовом определенных хуков (beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted), которые позволяют выполнять различные действия в нужные моменты жизни компонента.

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент

🔐 База собесов | 🔐 База тестовых