[ВАЖНО - Читай описание] Сравнение Vue3 composition API vs Vue2 optional API
HTML-код
- Опубликовано: 22 фев 2020
- --------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже неактуальные в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто не будет работать или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------
В этом видео создадим приложение с таблицей данный и фильтрацией сначала используя текущий optional api из Vue2, а потом перепишем его, используя composition api из Vue3.
Ссылка на установку плагина cimposition api: github.com/vuejs/composition-api
Ссылка на документацию по composition api: composition-api.vuejs.org/#su...
Ссылка на репозиторий проекта: github.com/antonboltnev/vue3-...
Приятного просмотра!
![[ВАЖНО - Читай описание] SELECT. Создание кастомного стилизуемого компонента на Vue.js](http://i.ytimg.com/vi/d0JjvnywGHI/mqdefault.jpg)
![[ВАЖНО - Читай описание] SELECT. Создание кастомного стилизуемого компонента на Vue.js](/img/tr.png)
Спасибо, отличная подача материала, разложено все по полочкам)
пипец конечно, было всё логично и структурированно во vue2 - котлеты отдельно, мухи отдельно, а теперь у нас есть god-функция setup, внутри которой функция filters, а внутри функции filters у нас лежат функции getOptions и applyFilters - матрешка какая-то получилась. А еще в каждой функции и подфункции создаются свои переменные и константы, жесть. Последние несколько лет все языки программирования шли в сторону декомпозиции и упрощения логики, чтобы писать меньше кода для более широкого спектра задач (переиспользование кода), а сейчас наоборот =)
эта идея была хорошей первые 10 минут, пока Эван думал что она хорошая, лучше бы он просто довел до ума интеграцию с typeScript и мы бы начали писать нормальные классы как во всех нормальных языках программирования, под которые сейчас существуют целые библиотеки паттернов и стандартов качественного кода.
Хорошо что Composition API не заставляют использовать, имхо, это п*здец. Правильно подмечено, мухи отдельно, котлеты отдельно, это и есть корректная структура кода, а Сompositon какое-то месиво, к тому же мне лично не понятно, какие проблемы решает такой подход, я лично выделил Vue из-за его логичности. Я за то что бы использовать Options API как стандарт для соло и командной разработки, а вот это месиво в утиль, думаю со временем как-то так и произойдет. Имхо Vue 2 это тот случай когда не нужно что-то менять, и без того работает отлично.
не особо понимаю кому нравится декомпозировать код в сборище котлет и мух, никто не декомпозирует код, разделяя все на стейты, функции и хуки. Видел где то хороший пример, это все равно что в книге с детективом сначала прочитать все главы про любовные линии, сам детектив, все главы с боевыми сценами и так далее)) В этом и суть композишона, что там можно переиспользовать логику компонентов, к примеру кастомные хуки, аля реакт, так что чисто субьективщина
Спасибо, доходчиво.
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
watcher для загрузки, кончено не очень хорошо... так прям и чувствую ошибки в будущем ))) может быть как-то async - await прикрутить?
Victor Cozhuhari возможно. Пока до конца не понятен полный функционал нового api, но я очень надеюсь что ребята из Vue оставят mapActions хотябы, ибо с ними очень удобно работать. А вообще была мысль вынести этот экшн в какой-нибудь api.js и импортировать непосредственно в компонент. Тогда можно использовать как промис. Но в этом случае придется потом дергать из компонента мутацию, которая в нашем случае комитится из экшна в сторе. Короче посмотрим что будет в итоге когда vue3 выйдет. Пока что плагин показывает альфа версию composition api, а документация по нему крайне скудная:)
@@gofrontend2220 А у setup же есть параметр context, при помощи которого вместо this можно обратиться context.root.$store
Victor Cozhuhari ну по-моему проще импортировать весь стор разом и через state, dispatch, commit дергать то что нужно:) надо дождаться либо более детальной документации, либо уже Vue3. Многое может измениться
@@gofrontend2220 Там есть еще такие фишки provide, inject, но я не разобрался пока
Victor Cozhuhari все впереди:) я просто пока хочу дождаться хоть какого-то заявления от разрабов о том, что точно будет или не будет. А то щас нам наобещают, а в релиз и половина не попадет:)
7.44 не совсем понял зачем мы создаем, потом клонируем из mapState а затем мы перебираем в цикле? Потерял логику(("" извеняюсь за пол года можете забыть весь этот код")) но если объясните будет круто! я начинающий))
будет что то свежее по архитектуре и тд?
Ааааааа я только начал понимать что происходит. А тут еще это функций внутри функций он сломает мне мозг. Запустил этот проект скачав с Git, Сomposition имеет 201 строчек кода а Оptional имеет 202 строчек кода. И смотрю что красивее выглядит и Оptional посимпатичней...
"И увидимся в следующих видео." Где следующие видео!?
Называется, займи мозг взрослых людей, совершенно бессмысленным занятием - заставь их делать то же самое, но по другому.
А когда они портят пол года, или год, что бы освоить это "по другому", придумай еще что ни будь, что бы они делали тоже самое но по другому. И так, по кругу до бесконечности.