Как работает реактивность во Vue2?

Как работает реактивность во Vue 2

Реактивность - это система Vue, которая автоматически обновляет UI при изменении данных. Vue отслеживает изменения в объектах и массивах.

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

1. Reactive Data Binding Vue преобразует свойства data в реактивные при создании компонента:

data() {
  return {
    message: 'Hello', // Vue отследит изменения
    count: 0
  }
},

methods: {
  increment() {
    this.count++; // Триггерит re-render
  }
}

2. Dependency Tracking (отслеживание зависимостей) Vue использует Observer pattern для отслеживания зависимостей:

computed: {
  fullName() {
    // Отслеживаются firstName и lastName
    return this.firstName + ' ' + this.lastName;
  }
},

watch: {
  'firstName': function(newVal, oldVal) {
    console.log('First name changed');
  }
}

3. Object.defineProperty для Getters/Setters Vue использует Object.defineProperty (внутренний механизм):

// Упрощённо:
function defineReactive(obj, key, value) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`Getting ${key}`);
      return value;
    },
    set(newValue) {
      if (newValue !== value) {
        console.log(`Setting ${key} to ${newValue}`);
        value = newValue;
        // Оповещаем зависимые компоненты
        dep.notify();
      }
    }
  });
}

4. Computed Properties (вычисляемые свойства) Кэшируют результаты и пересчитываются только при изменении:

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

5. Watchers (наблюдатели) Реагируют на изменения и выполняют код:

watch: {
  message(newVal, oldVal) {
    console.log(`Message changed`);
  },

  'user.profile': {
    handler(newVal) {
      console.log('Profile changed:', newVal);
    },
    deep: true
  },

  count: {
    handler(newVal) {
      console.log('Count is now:', newVal);
    },
    immediate: true
  }
}

Как работает update process

// 1. Изменяем данные
this.count++; // Вызывается setter

// 2. Vue добавляет компонент в очередь (batching)

// 3. Vue пересчитывает новый VDOM

// 4. Vue сравнивает старый VDOM с новым (diffing)

// 5. Vue обновляет реальный DOM

// 6. Компонент перерисовывается

Ограничения реактивности

// Проблема: Vue не отслеживает добавление новых свойств
const user = {name: 'John'};
user.email = 'john@example.com'; // НЕ реактивно!

// Решение: используй Vue.set
Vue.set(user, 'email', 'john@example.com');
this.$set(user, 'email', 'john@example.com');

// Проблема: изменение элементов массива по индексу
const items = [1, 2, 3];
items[0] = 5; // НЕ отследит!

// Решение: используй splice
items.splice(0, 1, 5);
Vue.set(items, 0, 5);

Пример компонента

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe',
      count: 0
    }
  },

  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },

  watch: {
    count(newVal) {
      if (newVal > 10) alert('Count is too high!');
    }
  },

  methods: {
    increment() {
      this.count++; // Триггерит re-render
    }
  }
}

Производительность

// Плохо: вычисление в template каждый раз
<div>{{ items.filter(i => i.active).length }}</div>

// Хорошо: computed property кэшируется
computed: {
  activeCount() {
    return this.items.filter(i => i.active).length;
  }
}
<div>{{ activeCount }}</div>

Реактивность Vue - мощный инструмент для создания интерактивных приложений без ручного обновления DOM.