Composition или Options API

В этом видео / статье мы познакомимся нововведениями во vue.js 3, а также разберемся с composition api и сравним его с options api. По окончании мы полностью перепреем текущее приложение на новый апи используя вью 3 :)

И самое главное - вы выберете для себя, что удобнее новый апи или старый и привычный options api.

💭   Предисловие

Если вы хотите глубже погрузиться в Composition API то вот ссылка на полный курс по вью-3 там более сотни видеоуроков, домашки с подробным ревью и еще много всего интересного, а еще курс по вью-2 в подарок.

Или посмотрите хотя бы «демо» из полного курса по вью-3 тк там есть весь базис вьюшки – от инициализации вью до жизненных циклов (и плагины, которые помогут в работе). Ибо, не зная даже базиса будет очень тяжело. Демо-доступ ни к чему не обязывает и полностью бесплатный получить его можно на промо-странице полного курса, а потом уже возвращайтесь в этот курс, так будет куда легче 👌

Что такое ref() Composition api

Если использовать обычные константы то вы не увидите изменений, если будете пытаться их изменить, только повторный вызов этих констант покажет вам, что они изменились (так работает нативный js)

Чтобы на Composition API сделать значения реактивными вам понадобятся refs (рефы).

Первое, что нужно сделать, это их импортировать рефы:

import { ref } from 'vue'

Далее можно описать переменную:

export default {
  setup() {
    const items = ref([])
  }
}

В каком случае использовать ref():

1. String
2. Boolean,
3. Number,
4. BigInt,
5. Symbol,
6. null,
7. undefined

Для работы с объектами нужно использовать reactive. Для работы с массивами можно использовать ref, но также можно использовать и reactive.

Что такое Proxy во vue 3

Когда мы возвращаем простой объект JavaScript из функции данных компонента, Vue помещает этот объект в прокси (открывает новое окно) с обработчиками для get и set.

Прокси были введены в ES6 и позволяют Vue 3 избежать некоторых ограничений реактивности, которые существовали в более ранних версиях Vue.

Прокси - это объект, который охватывает другой объект и позволяет вам перехватывать любые взаимодействия с внутри объекта. (Чего нельзя было сделать на вью 2, да и на реакте тоже нельзя)

Но у прокси есть один минус - его не поддерживает IE 11, н число плюсов куда больше, например, можно полностью отказаться от VUEX тк получить то или иное свойство вы можете получить из любого компонента.

Почитать больше вы можете тут

Именно поэтому нужно дописывать value при обращение к переменным которые обернуты в прокси (используются реактивно)

Методы в Composition API

Методы можно писать любым способом, можно использовать стрелки:

const handleSubmit = item => items.value.push(item) 

Или писать функции:

function handleSubmit(item) {
  return items.value.push(item)
}

Я предпочитаю стрелки потому что:

1. Короче
2. Красивее
3. Не нужно дописывать return
4. Основное - this не нужен (в большинстве случаев)

Несмотря на то, что они анонимны, мне также нравится использовать их с такими методами, как map и reduce, потому что я думаю, что это делает мой код более читабельным. Для меня плюсы перевешивают минусы. Стрелочные функции лучше всего подходят для всего, что требует привязки к контексту, а не к самой функции.

Использование сортировки и computed на composition api

К рефам нужно дописать компьютед:

import { ref, computed } from 'vue'

А исходный код будет выглядеть так:

const sorteredItems = computed(() => {
  return items.sort((a, b) => {
    if (a[sortBy.value] > b[sortBy.value]) return -1
    if (a[sortBy.value] < b[sortBy.value]) return 1
  })
})

Где items это исходный массив данных. А sortBy это переменная, к которой привязано значение по которому будет происходить сортировка.

Обратите внимание: на sortBy.value здесь используется value тк значение sortBy является реактивным (отсылка на прокси)

На этом все

Весь исходный код доступен на гитахбе

Подписывайтесь на группу вк - клик тут там я буду публиковать новости и то, что мне интересно в сфере разработки :)

В ближайшее время будет очень много классных видео! Подписывайтесь на ютуб канал чтобы быть в курсе, а еще поставьте класс на это видео, это поможет мне реанимировать канал =)