Vue 2 и Vue 3 - отличия

Что нового в Vue 3

Сначала давайте углубимся в API параметров.

Итак, как вы знаете, разработчики vue, в vue 2 мы используем «API параметров». API параметров — это традиционный способ структурирования и определения компонентов. Он включает в себя определение компонента с использованием набора параметров.

 data() {
    return {
      message: 'Hello, Vue!',
      count: 0
    };
  }

Выше приведен пример использования API опций.

• У нас также есть «Методы» для функций, реквизиты для реквизита (очевидно), наблюдатели, методы жизненного цикла, такие как созданные, смонтированные, обновленные и т. д. в Options Api.

 watch: {
    message(newVal, oldVal) {
      console.log('Message changed from ' + oldVal + ' to ' + newVal);
    }
  },  

created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  destroyed() {
    console.log('Component destroyed');
  } 

Теперь в Vue 3 у нас также есть Composition Api.

Composition Api

Composition API — это альтернативный способ структурирования и организации кода внутри компонентов Vue. Он обеспечивает более гибкий и масштабируемый подход по сравнению с options API. Вместо того, чтобы разделять параметры компонента на разные разделы, Composition API рекомендует группировать связанную логику вместе.

Вот ключевые концепции и функции Composition API в Vue 3:

• Setup function: В Composition API каждый компонент состоит из функции настройки, которая возвращает объект, содержащий свойства, методы и другие реактивные ссылки компонента. Функция настройки запускается перед созданием компонента, что позволяет настроить реактивное состояние компонента и определить логику компонента.

import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, Vue!',
      count: 0
    });

    const increment = () => {
      state.count++;
    };

    const doubleCount = computed(() => {
      return state.count * 2;
    });

    return {
      state,
      increment,
      doubleCount
    };
  }
};

• Реактивное состояние: Composition API предоставляет реактивную функцию, которая позволяет создавать реактивные объекты. Любые изменения, внесенные в реактивные свойства, вызовут реактивность и соответствующим образом обновят вид компонента.
• Вычисляемые свойства: Вычисляемые свойства могут быть созданы с помощью вычисляемой функции. Вычисляемые свойства — это производные значения, которые автоматически обновляются при изменении их зависимостей.
• Методы: Вы можете определить методы компонента в функции настройки. Доступ к этим методам можно получить и использовать в шаблоне компонента или программно.
• Крючки жизненного цикла: Composition API предоставляет хуки жизненного цикла, аналогичные API Options. Однако они имеют префикс on, например onMounted, onUpdated и onUnmounted. Эти хуки позволяют выполнять действия на разных этапах жизненного цикла компонента.

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });
  }
};

• Ref: Composition API представляет функцию ref, которая позволяет создавать реактивную ссылку на значение. Ссылки особенно полезны при работе с примитивными значениями, которые требуют реактивности.
• Watch: Composition API предоставляет функцию наблюдения, которая позволяет выполнять операции на основе изменений реактивного состояния или ссылок.

import { watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log('Count changed from ' + oldValue + ' to ' + newValue);
    });

    return {
      count
    };
  }
};

Это основное отличие vue 2 от vue 3, которое появилось и улучшит качество кода и производительность vue. Однако Options API никуда не денется, он останется как есть и будет доступен и в vue 3.

Система реактивности

Vue 3 представляет обновленную систему реактивности, которая более эффективна и работает лучше по сравнению с Vue 2. Новая система, известная как система реактивности на основе прокси, предлагает улучшенное отслеживание реактивности, что приводит к более быстрому и большему точные обновления.

// Vue 2
this.message = 'Hello, Vue!';

// Vue 3
import { reactive } from 'vue';

const state = reactive({ message: 'Hello, Vue!' });

Улучшения производительности

Vue 3 обеспечивает значительные улучшения производительности по сравнению с предшественником. Алгоритм виртуального DOM (VDOM) был оптимизирован для уменьшения выделения памяти и увеличения скорости рендеринга. Новый метод подъема статического дерева в Vue 3 устраняет избыточную повторную визуализацию статического содержимого, что приводит к повышению производительности в сложных приложениях.

Меньший размер пакета

Vue 3 имеет меньший размер пакета по сравнению с Vue 2. Это достигается за счет лучшего встряхивания дерева и улучшенной системы модулей. Модульная конструкция Vue 3 позволяет разработчикам импортировать только необходимые функции, уменьшая общий размер пакета приложений.

Интеграция TypeScript

В то время как Vue 2 имел ограниченную поддержку TypeScript, Vue 3 в полной мере использует возможности статической типизации TypeScript. Кодовая база Vue 3 написана на TypeScript, что обеспечивает лучший вывод типов и предоставляет расширенную поддержку автозаполнения и инструментов для пользователей TypeScript.

Заключение

Основное внимание в vue 3 уделялось производительности и оптимизации. Что ж, многие могут возразить, что API-интерфейс композиции — это здорово, и всем следует немедленно переключиться на него — я могу с уверенностью сказать, что многие захотят придерживаться API-интерфейса вариантов по ряду очевидных причин.

Основными отличиями являются Composition API, обновленная система реактивности, повышенная производительность, меньшие размеры пакетов, улучшенная интеграция TypeScript.

Хотя переход на vue 3 может занять некоторое время, улучшения того стоят.

Я надеюсь, что вы найдете эту статью полезной, и я смог вам чем-то помочь.