Avoid losing Reactivity in your Vue Application

[@TheAlexLichter]

Like if you ever "lost" reactivity!

[@Kingside88]

I really like your videos because they are close to real life problems. Another big topic is avoiding losing reactivity with arrays.

[@TheAlexLichter]

Thank you so much 🙏 Good point. Will write this down for another video! 👌

[@davealex123]

The timing of this video is crazy. I was literally wrapping a prop in a ref and was wondering why my code was not behaving correctly. This video explanation was really helpful. Thank you for creating such an informative short video.

[@TheAlexLichter]

That is indeed great timing 👏🏻 Glad it helped!

[@LiranTal]

Thanks for explaining this very simply, Alexander. I especially liked all the different options because you've hit the different cases I personally used. Please keep up with this type of content. I appreciate it a lot!

[@TheAlexLichter]

Glad it was helpful Liran! 🙌🏻

[@alimaher1]

When the video came out, I watched and said to myself 'meh, it's a rare case'. Here coming back after spending more than an hour debugging my code. What a life haha! Thanks, Alexander!

[@TheAlexLichter]

Oh wow! Sometimes coincidence is too real 😆 Glad it helped 👏🏻

[@gabrielserejo8379]

Thanks Alex, please keep it up! I see every single video

[@TheAlexLichter]

Definitely will! Thanks for tuning in every time 🙏

[@BricBracASMR]

I'm French. Your content is so qualitative! Thank you so much!

[@BricBracASMR]

@unseriousdev oui oui baguette 😋

[@TheAlexLichter]

Thank you for tuning in! Gald it helps 🙌✨

[@cheaterman49]

Wow, excellent video, some of this stuff can be really confusing and isn't (AFAIK) really explained in the docs either - at least not as a whole. It's also great that you make recommendations "in passing" such as "don't destructure props" - addressing common mistakes before they happen is a great idea :-). Really a must-watch video IMHO, thanks for making it :-)

[@ribl1000]

high value videos -some of the best most consice vue/nuxt content out there

[@TheAlexLichter]

Thank you so much 🙏🏻

[@mattickx]

Is there any overhead if we would use toRefs() compared of toRef() ? I do prefer using toRefs() and destructing that result. But I wonder if there is overhead due to it parsing all props instead just the ones you want to make reactive. Or is this negligible?

[@TheAlexLichter]

Nah, toRefs is fine as long as you don’t have optional values. Then, restructuring might not work as expected 😊

[@prishanf]

Hey Alex thanks a lot the great video. I’m still confused about what is the difference between props.title vs ()=> props.title

[@virusblitz]

Thanks covering this, love it when you show common pitfalls! Even with vue experience I keep making some of these :)

[@TheAlexLichter]

You are welcome! Glad it is helpful 🙌

[@DeepStreamBits]

Would a computed() value work the same as toRef()?

[@TheAlexLichter]

Yes, absolutely! And that'd also be my "go to" version when dealing with props or `reactive` values - especially as props are read-only anyway 👌

[@alibahrami6810]

I must say, awesome content! keep going great, Alexander!

[@TheAlexLichter]

Thanks, will do for sure! 🔥

[@freakfreak786]

Man...i've been using nuxt wrong the entire time. Time to refactor some code. Awesome video btw, thank you

[@TheAlexLichter]

Glad it helped you 😊

[@vuenice]

Which title will be considered in template, props.titile or toRef(...)

[@TheAlexLichter]

The more explicit one (so const title > props.title) in the template

[@jass__0]

After working on react for 2 years , now moving to vue and it just amazed me. But now react making huge change by bringing its compiler hope that it wont hurt vue. Xd :) Btw, Good content.

[@TheAlexLichter]

Glad to hear that the switch to Vue was fun to you 👍🏻 Thank you ☺️

[@mattfletcher7321]

Your tutorials are very good! Would you be able to create a tutorial for writing a composable that could accept a primitive, ref, or getter? Or at least a deep dive into how vueuse or the nuxt composables handle this scenario?

[@TheAlexLichter]

Thank you! Yes, absolutely. Noted down 👌

[@valacshiro378]

Thabk you this solved my problem. Realle good videos, keep it going this ir helpful in many ways 😊😊

[@TheAlexLichter]

Awesome! Happy to hear they help 🙏

[@nines_99]

probably i should read docs, but the obvious question is: what’s the difference between computed and toRef? why didn’t you use computed? and instead used toRef?

[@TheAlexLichter]

Computed would be my go-to for props. When having other reactives, toRef allows to sync between the values in both ways!

[@nines_99]

@@TheAlexLichter ooh, i didn’t know that, thank you!

[@alexandros-markovits]

Nice tutorial! Also caution for times that objects are being passed in a component, the reactivity mechanism can end up being based on value by reference. More examples and best practices of such cases could be interesting.

[@TheAlexLichter]

Good point! It is general JS behavior but can still shoot you in the foot 🙈

[@youhan96]

Great explanation Alex! Made complete sense!

[@TheAlexLichter]

Glad it was helpful! 🙏🏻

[@KennethFabo]

Hey Alex thanks a lot the great video. I’m still confused about what is the difference between props.title vs ()=> props.title

[@TheAlexLichter]

Thanks! If you want to watch a value from an reactive object (and props are „reactive“), you need to use that „reactive getter“ pattern so the watcher knows when a value updates

[@reneeschke]

I didn't know props is "reactive()" under the hood, nice! I'm surprised you didn't mention making a computed of title in the component. What's your stand here? It works, but probably not recommended?

[@TheAlexLichter]

Yeah, `computed` would be my go-to solution here as props are read-only anyway!

[@reneeschke]

@@TheAlexLichter why didnt u include the computed workflow in the video, then? just curious. you mean props are read only, right? refs can be changed? or am I crazy now 😂

[@TheAlexLichter]

Good question. Should've shown it too as an option, even though computed has a slight overhead (because it adds a dependency check) Yup, you are right - Updated my comment 😂

[@Like_a_lion_979]

Thank for the video, really useful. I wonder is there a way to use somehow toRefs to not lose reactivity?

[@JiveOff]

From experience, toRefs can be used with the output of defineProps, which then would make all props reactive if you use the output of toRefs.

[@TheAlexLichter]

You are welcome! With toRefs, you won't lose the reactivity (as shown) ✔

[@TheAlexLichter]

toRef is useful for *optional* props (which are not covered via toRefs if they don't exist)!

[@Gaijin101]

Wonder if we ever gonna get a simpler ref vs reactive | useFetch vs $fetch. Its not very intuitive for most beginners.

[@TheAlexLichter]

Great idea Damian! Will put it on the list 👌

[@hassankadhim5465]

🔥🔥

[@LujzaPoroknovcova]

Nice video as always but the example with title passed as props and then mutated thanks to toRef is not the best as props shouldn't be mutated.😊

[@TheAlexLichter]

Yes, that's true! Also mentioned that in the comments before. On the other hand, a `computed` is less performant (+ there is the readonly helper)

[@ngetichishmael]

This solves a lot of my problems 😂.

[@TheAlexLichter]

Perfect 🙌

[@yunusemrefersiz2848]

An Other great video ty Alex

[@TheAlexLichter]

Thank you! 🙏

[@karshten9218]

Thanks a lot

[@freekeys]

Exactly.... We shouldn't destructuring the props 💯, i used to do in my initial days🤦😂

[@TheAlexLichter]

And you will be able to again in Vue 3.5 with the (in 3.4 experimental) props destructuring feature 👀

[@freekeys]

@@TheAlexLichter so props destructuring won't lose the reactivity in vue 3.5 feature?🤔

[@TheAlexLichter]

@freekeys yup! Check out the RFC @ github.com/vuejs/rfcs/discussions/502

[@freekeys]

@@TheAlexLichter so pinia would also do it, current i need to use storeToRef in pinia. 🤦😂

[@TheAlexLichter]

I still would go for storeToRefs because you get refs, not „reactive“

[@top10acousticshowslist77]

nice information not many people talk about this simple but important concept.♥♥♥

[@TheAlexLichter]

Glad you think so!

[@ricko13]

the .value thing is so annoying sometimes :/

[@TheAlexLichter]

I actually think it is useful When using TS the IDE should autocomplete it 🙌🏻 And then you know if the value you deal with is reactive or not 👌🏻

[@杨磊-t6s]

I think you're left-handed 5:10

[@TheAlexLichter]

I think you are right 😁

[@kirayamato6128]

auto import is not quite good. other devs will have a headache debugging or reading the code.

[@TheAlexLichter]

I'd argue that it is the opposite. For me, importing ref/computed/... all the time even though it is obvious that it comes from Vue creates more noise in the code. And because TS intellisense + "go to" still works, I can easily check where things come from if needed. But you can also make it work without auto imports if you prefer it 😊

[@mrleblanc]

Intro is too loud