Тёмный

Converting a Vue component to the Composition API 

Andrew Schmelyun
Подписаться 35 тыс.
Просмотров 6 тыс.
50% 1

In this 14 minute video, I'll walk you through as I convert an existing Vue component from the Options API to the newer Composition API. I created a basic e-commerce shopping cart with the Options API, containing props, methods, and computed properties. In this high-level overview, I transform that component to use the Composition API, which has a drastically different code structure (but one that I think you'll enjoy).
You'll learn:
- What script setup does
- The difference between ref and reactive
- How to create methods and computed properties
- Why to switch to the Composition API
- 0:00 Intro
- 02:10 Getting started with setup()
- 03:33 Introducing ref and reactive
- 05:11 Using script setup
- 06:32 Including props
- 07:02 Adding methods
- 09:22 Including computed properties
- 11:38 Why use the Composition API
- 14:09 Wrapping up
Follow me on Twitter! / aschmelyun
Join my newsletter, where I send out new information twice each month in the PHP, JavaScript, and Docker worlds: aschmelyun.substack.com

Наука

Опубликовано:

 

4 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 23   
@aschmelyun
@aschmelyun 2 года назад
Check out the source for this video on GitHub: github.com/aschmelyun/video-vue-converting-composition-api
@CsabaKiss69
@CsabaKiss69 Год назад
Fantastic explanation. Thank you!
@FeolinImages
@FeolinImages 2 года назад
This real-life example is excellent also for those who are just learning Vue. Any interaction with Laravel would be great too.
@jnaras
@jnaras 6 месяцев назад
Nice. Thanks Andrew.
@aspirinemaga
@aspirinemaga 9 месяцев назад
Extremely helpful video, thanks for explanation! I watched it because I'm pushed by community and forced to learn yet again something new instead of being productive and work on my tasks. Everything was achievable with Options API (O), and I still see no reasonable tradeoff to spent time learning something new, which doesn't really help. You are showing a perfectly organized code of (O), but representing it like it's not organized at all. There is a very high chance that you started to work with Vue.js 2 (O) because of how easy and nicely organized it was back then, now it's a big mess with those C api...
@julienSibille
@julienSibille 2 года назад
Useful, thank you !
@Chavez3d
@Chavez3d Год назад
Great job 👏
@muhammadhamzaawan4504
@muhammadhamzaawan4504 2 года назад
Composition API well understood thanks ❤️
@aschmelyun
@aschmelyun 2 года назад
I'm glad you understand it now!
@zenvibes_hub
@zenvibes_hub 2 года назад
it's very useful example thank you !
@aschmelyun
@aschmelyun 2 года назад
Thanks, glad you liked it!
@bradledford8877
@bradledford8877 5 месяцев назад
helpful, thank you
@VF7RM
@VF7RM Год назад
👏👏👏
@Quynn-Oneal
@Quynn-Oneal 2 года назад
13:34 what if I need to use user property inside totalCost computed property above? do I need to move totalCost below the user?
@aschmelyun
@aschmelyun 2 года назад
Nope! One of the beauties of the setup method (including script setup) is that everything you export is available to each other at runtime, regardless of position. See this example: bit.ly/3sLmbhF
@facuagueria
@facuagueria 2 года назад
Is a very good example! Can you do any video using Vuex and composition API? Thank you!
@aschmelyun
@aschmelyun 2 года назад
Sure thing! I’ll add that to my list of ideas
@CsabaKiss69
@CsabaKiss69 Год назад
Can you please make a video about life-cycle hooks?
@Troy-ol5fk
@Troy-ol5fk 2 года назад
please make a video about testing vue components with jest or cypress
@aschmelyun
@aschmelyun 2 года назад
This is on my to-do list and I will have a video for it in a few weeks!
@tingtingjoanaling2114
@tingtingjoanaling2114 Год назад
Hi, may i know how can use this.$set inside vue composition api?
@HadayatNiazi-xp1fz
@HadayatNiazi-xp1fz 3 месяца назад
Love the way of your teaching, everything is clear, I came from the Vue option API and want to switch to the setup API. I was struggling to search real example and your video came and solved my problem. I am also tutoring Laravel and Vuejs on my channel www.youtube.com/@LaravelLover
@xtraszone
@xtraszone 19 дней назад
Didn't need to import defineProps
Далее
Improving Tailwind by doing these 3 things
15:06
Просмотров 2,8 тыс.
Кто Первый Получит Миллион ?
27:44
Modern monoliths: SPA and API in a single codebase
11:55
Why the Vue 3 Composition API?
7:33
Просмотров 126 тыс.
A few different ways to seed databases in Laravel
13:02
Build a shopping cart with Laravel Cashier and Vue
55:07
Vue 3 & Composition API - Full Project
1:09:15
Просмотров 122 тыс.
I built r/place with PHP and JavaScript in one hour
50:26
PA-RISC рабочая станция HP Visualize
41:27
OZON РАЗБИЛИ 3 КОМПЬЮТЕРА
0:57
Просмотров 28 тыс.