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

[@MakeAppswithDanny]

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]

Composition API is all i ever dreamed.

[@MakeAppswithDanny]

It's the greatest 👍

[@murat6018]

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]

Thanks Murat! I hope you convert to Vue 😂

[@murat6018]

@@MakeAppswithDanny :D have a great day!

[@riyad-appscode]

Awesome as always thanks

[@MakeAppswithDanny]

Thanks AL!

[@biankabilecova6238]

Hi, what is the name of the theme in vscode you're using?

[@MakeAppswithDanny]

That's the "Make Apps Theme": marketplace.visualstudio.com/items?itemName=dannyconnell.make-apps-theme

[@biankabilecova6238]

@@MakeAppswithDanny thanks a lot, finally a theme I can use

[@MakeAppswithDanny]

@@biankabilecova6238 Glad you like it! 👍

[@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]

​​@@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]

@@vornamenachname906good points 👍

[@truthteachers]

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]

I'm not sure. What is your code?

[@truthteachers]

@@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]

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

[@tanzimibthesam5861]

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

[@MakeAppswithDanny]

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

[@tanzimibthesam5861]

@@MakeAppswithDanny awesome

[@arslonbekroziboyev5683]

thanks Danny!!!

[@MakeAppswithDanny]

No worries!

[@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]

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

[@MakeAppswithDanny]

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.

[@wiktoriusz007]

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]

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.

[@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.