​Как работает реактивность в vue.Js ?

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

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

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

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

Реактивность через геттеры и сеттеры:
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 легко масштабируется для больших и сложных приложений.

👉 @frontendInterview