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

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