В чем добавлена оптимизация во Vue 3

Vue 3 принес несколько ключевых оптимизаций:

1. Компиляция шаблонов — шаблоны компилируются в более эффективный код, избегая лишних проверок и оптимизируя обновления.

2. Tree-shaking — Vue 3 разбит на модули, что позволяет исключать неиспользуемый код при сборке.

3. Proxy вместо Object.defineProperty — реактивность теперь работает через Proxy, что ускоряет отслеживание изменений и поддерживает работу с массивами и новыми свойствами.

4. Фрагменты (Fragments) — компоненты могут возвращать несколько корневых элементов без обертки.

5. Статическое поднятие (Static Hoisting) — статичные части шаблона выводятся за пределы рендер-функции, избегая лишних пересчетов.

Пример оптимизации с Proxy:

const reactiveData = new Proxy({ count: 0 }, {
  get(target, key) {
    track(target, key);
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    trigger(target, key);
    return true;
  }
});