Назови отличия директив v show и v if ?
Спросят с вероятностью 7%

v-show и v-if — это две директивы, которые используются для условного отображения элементов в DOM. Однако они работают по-разному и имеют разные случаи использования. Рассмотрим их отличия более детально.

Основные отличия

1️⃣Рендеринг в DOM:
✅v-if: Элемент с v-if рендерится в DOM только тогда, когда условие истинно. Если условие ложно, элемент не создаётся и удаляется из DOM.
✅v-show: Элемент с v-show всегда рендерится в DOM, независимо от условия. Однако, его видимость контролируется с помощью CSS-свойства display.

2️⃣Переключение состояния:
✅v-if: Переключение между состояниями приводит к созданию или уничтожению элемента в DOM. Это может быть медленнее при частом переключении, так как каждый раз происходит перерисовка.
✅v-show: Переключение состояния происходит мгновенно, поскольку элемент уже присутствует в DOM, и меняется только его CSS-свойство display.

3️⃣Использование в условиях:
✅v-if: Рекомендуется использовать, когда элемент должен быть условно добавлен или удален из DOM. Полезно, когда условие меняется редко.
✅v-show: Рекомендуется использовать, когда необходимо часто переключать видимость элемента, поскольку это более производительно.

Примеры:

С v-if:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-if="isVisible">Этот текст отображается только если isVisible истинно</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> будет добавляться или удаляться из DOM при каждом нажатии на кнопку.

С v-show:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-show="isVisible">Этот текст всегда присутствует в DOM, но может быть скрыт</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> всегда присутствует в DOM, но его видимость контролируется с помощью CSS.

✅v-if: Условное добавление и удаление элементов в DOM.
✅v-show: Условное изменение видимости элементов с помощью CSS.

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

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

Какие структуры данных есть в js ?
Спросят с вероятностью 7%

Существует несколько основных структур данных, которые используются для хранения и управления данными. Рассмотрим их подробнее:

1️⃣Массивы (Arrays)
✅Что это: Упорядоченные списки элементов.
✅Зачем нужны: Для хранения коллекций данных, которые можно обрабатывать по индексу.
✅Как использовать:

          let fruits = ["Apple", "Banana", "Cherry"];
     console.log(fruits[0]); // Apple
     

✅Пример использования: Хранение списка товаров в корзине интернет-магазина.

2️⃣Объекты (Objects)
✅Что это: Наборы пар "ключ-значение".
✅Зачем нужны: Для хранения данных в виде ассоциативных массивов, где ключами могут быть строки или символы.
✅Как использовать:

          let person = {
       name: "John",
       age: 30
     };
     console.log(person.name); // John
     

✅Пример использования: Хранение информации о пользователе.

3️⃣Map (Карты)
✅Что это: Коллекции пар "ключ-значение", где ключи могут быть любого типа.
✅Зачем нужны: Для хранения данных с уникальными ключами, с более гибкими возможностями по сравнению с объектами.
✅Как использовать:

          let map = new Map();
     map.set('name', 'John');
     map.set(1, 'one');
     console.log(map.get('name')); // John
     

✅Пример использования: Хранение настроек с ключами различного типа.

4️⃣Set (Множества)
✅Что это: Коллекции уникальных значений.
✅Зачем нужны: Для хранения множества значений, где каждое значение уникально.
✅Как использовать:

          let set = new Set();
     set.add(1);
     set.add(1); // Значение не добавится, так как оно уже существует
     console.log(set.size); // 1
     

✅Пример использования: Хранение уникальных тегов из списка статей.

5️⃣WeakMap (Слабые карты)
✅Что это: Коллекции пар "ключ-значение", где ключи являются объектами и имеют слабые ссылки.
✅Зачем нужны: Для хранения данных с автоматическим удалением неиспользуемых объектов.
✅Как использовать:

          let weakMap = new WeakMap();
     let obj = {};
     weakMap.set(obj, 'value');
     obj = null; // Теперь объект может быть удалён из памяти
     

✅Пример использования: Хранение метаданных объектов без риска утечек памяти.

6️⃣WeakSet (Слабые множества)
✅Что это: Коллекции объектов, где каждое значение может быть удалено автоматически, если больше не используется.
✅Зачем нужны: Для хранения уникальных объектов с возможностью автоматического удаления.
✅Как использовать:

          let weakSet = new WeakSet();
     let obj = {};
     weakSet.add(obj);
     obj = null; // Теперь объект может быть удалён из памяти
     

✅Пример использования: Отслеживание объектов без риска утечек памяти.

7️⃣String (Строки)
✅Что это: Последовательности символов.
✅Зачем нужны: Для хранения и обработки текстовых данных.
✅Как использовать:

          let greeting = "Hello, world!";
     console.log(greeting.length); // 13
     

✅Пример использования: Хранение и манипулирование текстовой информацией, такой как имена пользователей или сообщения.

8️⃣Typed Arrays (Типизированные массивы)
✅Что это: Массивы, которые предоставляют массивы с фиксированной длиной для различных типов данных.
✅Зачем нужны: Для работы с бинарными данными и оптимизации производительности.
✅Как использовать:

          let buffer = new ArrayBuffer(16);
     let int32View = new Int32Array(buffer);
     int32View[0] = 42;
     console.log(int32View[0]); // 42
     

✅Пример использования: Обработка данных в WebGL или манипулирование бинарными данными.

Есть массивы, объекты, Map, Set, WeakMap, WeakSet, строки и типизированные массивы. Они нужны для хранения и управления различными типами данных, от упорядоченных списков до ассоциативных массивов и уникальных наборов значений.

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

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

Что делает метод apply ?
Спросят с вероятностью 7%

Метод apply позволяет вызвать функцию с определённым значением this и передать аргументы в виде массива (или массивоподобного объекта). Он является частью прототипа функции и используется для управления контекстом выполнения функции и передачи аргументов.

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

Метод apply полезен в ситуациях, когда:
1️⃣Нужно вызвать функцию с конкретным значением this.
2️⃣Необходимо передать аргументы в виде массива, особенно когда их количество заранее неизвестно.

Как он используется

Синтаксис метода apply выглядит так:

function.apply(thisArg, [argsArray])

✅thisArg: Значение, используемое для this при вызове функции.
✅argsArray: Массив или массивоподобный объект, содержащий аргументы для функции.

Пример

function greet(greeting, punctuation) {
  console.log(greeting + ', ' + this.name + punctuation);
}

const person = { name: 'Alice' };

greet.apply(person, ['Hello', '!']); // Вывод: "Hello, Alice!"

В этом примере:
✅Функция greet принимает два аргумента и использует this.name.
✅Метод apply вызывает greet с this, указывающим на объект person, и передает массив аргументов ['Hello', '!'].

Зачем использовать apply вместо других методов

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

greet.call(person, 'Hello', '!'); // То же самое, но аргументы передаются по отдельности

Еще один пример: использование с встроенными методами

Метод apply можно использовать для передачи массивов встроенным функциям, которые не работают напрямую с массивами. Например, использование метода Math.max для нахождения максимального значения в массиве:

const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers); // 7

Здесь:
✅Math.max ожидает список отдельных чисел, а не массив.
✅apply передает массив как набор отдельных аргументов.

Метод apply вызывает функцию с определённым значением this и аргументами в виде массива. Это удобно, когда аргументы уже находятся в массиве и нужно управлять контекстом выполнения функции.

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

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

Что такое самовызывающаяся функция ?
Спросят с вероятностью 7%

Самовызывающаяся функция (IIFE, Immediately Invoked Function Expression) — это функция, которая вызывается сразу же после её объявления. Используется для создания локальной области видимости и изоляции кода от глобальной области видимости.

Зачем нужны самовызывающиеся функции

Самовызывающиеся функции используются для:
1️⃣Изоляции переменных и предотвращения их попадания в глобальную область видимости.
2️⃣Создания замыканий.
3️⃣Инициализации кода, который должен выполняться сразу после загрузки страницы или выполнения скрипта.

Как пишется самовызывающаяся функция

Синтаксис IIFE выглядит следующим образом:

(function() {
  // код функции
})();

Или с использованием стрелочных функций:

(() => {
  // код функции
})();

Примеры:

Изоляция переменных

(function() {
  var message = 'Hello, World!';
  console.log(message); // Вывод: Hello, World!
})();

console.log(message); // Ошибка: message is not defined

В этом примере переменная message существует только внутри IIFE и недоступна вне её.

Создание замыканий

var counter = (function() {
  var count = 0;
  return function() {
    count += 1;
    return count;
  };
})();

console.log(counter()); // Вывод: 1
console.log(counter()); // Вывод: 2

Здесь IIFE создаёт локальную переменную count, к которой можно получить доступ только через возвращаемую функцию.

Инициализация кода

(function() {
  console.log('IIFE выполнена сразу после объявления!');
})();

Этот пример демонстрирует выполнение кода сразу после объявления функции.

Самовызывающаяся функция (IIFE) — это функция, которая вызывается сразу после её объявления. Она используется для изоляции переменных и создания замыканий.

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

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

Как работают 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 разработчика. Ставь 👍 если нравится контент

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