Vue 3 Watch vs WatchEffect! Watch OUT, you'll probably get this wrong!
Vložit
- čas přidán 27. 07. 2024
- Vue.js 3 has a watch and watchEffect. But how do you reactively use side-effects with Vue? And which one do you use? In this video I discuss the benefits and the drawbacks of watch and watchEffect with Vue.js 3.
👉Check out my last video on why you don't need css!
• Why You Don't Need Vue...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech/
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikh...
Need to Learn Vue or Nuxt? Check out my courses below!
bit.ly/2LalQka - Learn Nuxt.js Course!
bit.ly/3aiYe8s - Quick Starter On Vue 3
bit.ly/2OETt0M - Full 6 Module course on vue!
0:00 Introduction
0:36 What is watch and watchEffect?
03:48 #1 watch runs lazily
06:10 #2 more specific trigger
07:35 #3 previous and current values
08:13 other things to Watch out for!
🗂️ 🗂️ 🗂️
Links
v3.vuejs.org/api/computed-wat...
gist.github.com/ErikCH/919ab6...
Hey! I'm working on an advanced Vue.js course! If you'd like to know more, click here -> www.vuecourse.tech/ and sign up! I'll get you a free cheat sheet and I'll let you know when it's out!
Is it out yet by any chance?
You just saved the day. I was stuck trying to make a watch works properly, but I was wrong.
Thank you so much!
Wow, watch() is super useful for what I was trying to do, thanks for explaining it! Vue 3 is pretty awesome
This is pletty nice. For someone coming from React to Vue, I was wondering how I would implement my useEffect's.
This has got to be it. Thanx.
Glad I could help!
Why are you moving from react?
@@possumkeys I am just broadening my knowledge. I need to master another frontend framework apart from React.
Can you do a video on vitejs SSR with vue 3 and a simple example of data preferching?!
Thanks, Please more advanced videos and please make video ho to make non reactive copy of ref,reactive, props ....+ vue reactivity explained. Thanks 🙏
Wow! Congratulations on your new job!
Thank you!!
So `watch` works like the watch option in Vue2 and `watchEffect` kinda works like `computed`, except that it doesn't return anything
Awesome tutorial man...
Glad you liked it!
Hi, you seem love to use typescript in your project. So do I. But there's more 3rd party libraries do not have typescript support yet. Such as wowjs. Because of that, I cant use typescript in my project. So javascript without typescript is the safe and stable choice now, right?
From what I understood, which I think you "kind of" mentioned but I don't think you pressed the point home.
Watch() allows you to watch Ref A and do something with Ref B and C (but never actually read A).
Where as WatchEffects() will only run when Ref B and C changes, not when Ref A does anything. Because you don't read A within the effect.
Great content 👍 100%
Thank you 🙌
I love watch, i usually use this to grab route changes and send some data to my server.
Why?
@@possumkeys Because it's a middleware.
lol i was about to ask about the theme name and you answered it
watch ( () => write.value, ... and watch(write, ... What's are differences ?
Same
watch(source, (newValue, oldValue) => {
// executed immediately, then again when `source` changes
}, { immediate: true })
you can pass the immediate to true if you want it to execute immediatly like watchEffect there is a lot of thing to do the same thing in vue damn
Watcheffect like useEffect in react but better
Watch in Vue 2 you can add immediate: true
Seam not possible anymore.
I would make a function called in the watch and created life cycle
It's possible, watch function in composition API is same as its watch counterpart in options API.
You can provide those options as third argument to watch function, check official docs for detailed info.
Yup, I believe so.
Good stuff, didn't know about watchEffect yet, seems very svelte'
Hmm
dunno about watchEffect but it sounds like react useEffect..
maybe they should've just named them like *LazyWatch* and *InitWatch* or something like that
Naming things like react which I find is horribly named.
M-x Forever
You need to work on your CSS man. Its good content and yes you are focusing on main thing but something looks off and its that ugly style behind. As a frontend guy please spend more time on CSS, you will look better. I am telling you this not on basis of this vid only.
You bet!
UX/UI is done for purpose, not for the sake of it. This video is to be informative, and majority of the target audience don't really care, they are here for the JS. Now a CSS tutorial on the other hand.....
@@possumkeys I understand what you are saying. I just told him what I felt and its up to him to process my feedback. Majority of the audience may not care but maybe some do or maybe some are unaware that they do.
Also there is very strong aesthetic component in his webcam feed and also in code editor. This perhaps amplifies the insipidness of the page. Unrelated to actual content but its noticeable.
your videos are good but you take too much time, like these videos can be reduced to 5 min