Vue 3 Composition API Tutorial #3 - Methods, Computed & Watch

Подписаться 30 тыс.

Просмотров 18 тыс.

50% 1

In this series you’ll learn everything you need to know to get started with Vue 3 & The Composition API. This series is taken from my full Udemy course, "Vue JS 3 Composition API (with Pinia & Vite)".
👉 Vue 3 Composition API Course: dannys.link/compositionapi
👉 Full Playlist: dannys.link/compositionapifree
⬇ Chapters: ⬇
0:00 Introduction
0:25 Methods
4:12 Computed Properties
8:32 A Note on Filters
10:12 Watch
⬇ All videos in this series: ⬇
👉 #1 - Options API vs Composition API: • Vue 3 Composition API ...
👉 #2 - Data, Refs & Reactive Objects: • Vue 3 Composition API ...
👉 #3 - Methods, Computed & Watch: • Vue 3 Composition API ...
👉 #4 - Lifecycle Hooks: • Vue 3 Composition API ...
👉 #5 - Directives: • Vue 3 Composition API ...
👉 #6 - Vue Router: • Vue 3 Composition API ...
👉 #7 - Lists, Teleport & More: • Vue 3 Composition API ...
👉 #8 - Child Components: • Vue 3 Composition API ...
This is the 3rd video of 8 where we’ll be learning all about
- Methods
- Computed Properties
- Watchers
.. using the Composition API

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

2 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 35

@MakeAppswithDanny 2 года назад

Please Like, Share, Subscribe & Comment - it all helps me create more content! 👉 Vue 3 Composition API Course: dannys.link/compositionapi 👉 My Courses: dannys.link/courses

@vornamenachname906 9 месяцев назад

Composition API is all i ever dreamed.

@MakeAppswithDanny 8 месяцев назад

It's the greatest 👍

@riyad-appscode 2 года назад

Awesome as always thanks

@MakeAppswithDanny 2 года назад

Thanks AL!

@arslonbekroziboyev5683 2 года назад

thanks Danny!!!

@MakeAppswithDanny 2 года назад

No worries!

@murat6018 2 года назад

These tutorials are great Danny. I work as a VueJS developer but my background is in React. So far, I really, really don't like Vue. It feels really counter intuitive for me, I'd choose React over Vue at any given time. Anyways, due to the fact that I don't like it, it is very difficult to focus and do a good research on how to do certain things. You help me in overcoming that a lot. Thanks!

@MakeAppswithDanny 2 года назад

Thanks Murat! I hope you convert to Vue 😂

@murat6018 2 года назад

@@MakeAppswithDanny :D have a great day!

@tanzimibthesam5861 2 года назад

Awesome nice btw wanted to.know did you rewrite your fudget app to Quasar?

@MakeAppswithDanny 2 года назад

Thanks Tanzim! Yes, Fudget 2 is in Quasar 2 (Vue 3) 👍

@tanzimibthesam5861 2 года назад

@@MakeAppswithDanny awesome

@wiktoriusz007 2 года назад

Hi Dan thx for great vid. Earlier today I was contemplating replacing vuex with pinia in a fresh composition API + typescript quasar project. Do you think it's a worthwhile and safe integration or some features will break in either quasar or pinia? Or maybe some external useful packages will have conflicts with either of them?

@MakeAppswithDanny 2 года назад

I don’t see why you would have any major issues. The only problem I’ve had (which I go over on the full course) is that I couldn’t get the hot reloading with Pinia to work properly. So when you save your Pinia store file, you don’t see your page hot reload. However I assume this will be fixed soon.

@davidemmanuel5057 Год назад

thanks for the video, quick question why using const = () instead of use function? Has to do with the script setup declaration?

@MakeAppswithDanny Год назад

Thanks David! No, you can also you use function if you prefer 👍

@vornamenachname906 9 месяцев назад

@@MakeAppswithDannyeven if that's the case here, you might mention that there are some important differences between. They can't take arguments, obviously. But more important, Const Arrow function (lambda expressions bind to a constant) don't have their own this, they inherit from surrounding code, not from the 'real origin'.

@MakeAppswithDanny 8 месяцев назад

@@vornamenachname906good points 👍

@JonathanLopezSanchez-rg1dm Год назад

hi, nice video. one question, so what is the main difference between computed and watch, it looks like the same heheh. Thanks

@MakeAppswithDanny Год назад

Thanks Jonathan. They are quite different. A watcher is a method which watches a variable that's separate from the actual watcher (e.g. it watches a ref or a reactive object). Whereas a computed property is a method that returns a value. This value will be recalculated and returned any time the computed property's dependencies change.

@lucaswehmuth Год назад

Is there any way to rewrite lines 36-40 so that the arrow notation syntax is not used?

@MakeAppswithDanny Год назад

I'm not sure exactly what you mean. But you could probably use normal functions instead of the arrow functions (if that's what you mean).

@lucaswehmuth Год назад

@@MakeAppswithDanny Hey! Thanks for the reply! I managed to "convert" the code from lines 36-40 presented at 8:40 to the following code: function oddOrEven(){ if (counterData.count % 2 === 0) return 'even' return 'odd' } However, I was still missing where should I fill the computed() part of it. I tried messing around the syntax a lot with no luck but eventually I figured I had to put the computed() call to the oddOrEven function inside the section, so it became the following: This counter is {{ computed(oddOrEven) }} Anyway, I am quite new to JavaScript syntax so seeing that arrow thingy is still quite unusual to me. I was just trying to figure out if there's any way to get around without using it :)

@MakeAppswithDanny Год назад

@@lucaswehmuth You shouldn't need to do that in your template: {{ computed(oddOrEven) }}. If you wanted to create a computed property for the oddOrEven then you could just do: const oddOrEven = computed(() => { if (counterData.count % 2 === 0) return 'even' return 'odd' }) Then the template could stay the same: This counter is {{oddOrEven }}

@ethanroman6883 2 года назад

What is the release date of the new course ? Thank you

@MakeAppswithDanny 2 года назад

Ethan, I’m hoping it’ll be published week beginning 21st March. Can’t give an exact date. It depends how long Udemy take to review it.

@truthteachers 2 года назад

Hi Danny, with watch i am getting this warning: "[Vue warn]: `watch(fn, options?)` signature has been moved to a separate API. Use `watchEffect(fn, options?)` instead. `watch` now only supports `watch(source, cb, options?) signature. " What is this?

@MakeAppswithDanny 2 года назад

I'm not sure. What is your code?

@truthteachers 2 года назад

@@MakeAppswithDanny Odd , it does not appear anymore after refreshing. The "watchEffect()" does exist in the doc but there is no mention of using it in place of "watch()". Its odd that the warning flashed up in developer console but later disappeared after refresh. So sorry bro, sent you on a wild-goose.

@MakeAppswithDanny 2 года назад

@@truthteachers yea sometimes that can happen when hot reload doesn’t work properly 👍