When to Use Ref vs. Reactive // Vue Tips 

from what ive seen from most developers, the pattern of only using ref is pretty prevalent across the Vue community right now so we’re not alone!

In my view, why use ref if you can use directly reactive? Its one less step, less compute

@@xilass Because it requires objects to pass. And you will not always want to pass objects, but sometimes primitives as well. ref() gives you this flexibility to pass primitives and objects. reactive() not

@@DEVDerr Well, working with Proxies imo is a lot clearer than with an unknown object. Reactive is much more clear, you pass an object to reactive, and you receive and object, but with reactive data. No weird middleware objects created.

@@xilass javascript is not used for speed... thinking about speed and premature optimization is meaningless... i laugh everytime i see someone trying to convince everyone to use fastify instead of express... those milliseconds u shave off doesnt give you anything, the speed and performance comes from database, not the api lol... node is made for scaling horizontally... so it makes no sense for anyone to re-write their infra from express to fastify or something else for miniscule or almost non-existent gains... ref is nice and short , .. well vue macros is a new thing ; ] more interesting stuff, not sure if its shown in this channel... // ✅ won't lose reactivity with destructuring const { foo, bar } = definePropsRefs() // ⬇ Ref console.log(foo.value, bar.value)

@@Microphunktv-jb3kj man, i fully forgot what is ref and reactive since then 😓

Exactly the same usage

just made a video on this ;) but awesome point

and now it's deprecated, was experimental anyway.

@@metalsadman Which is a shame, as the code is so much more readable. I have only one bigger Vue project left, before I completely switch to Svelte. Development of Vue is just disappointing.

​@@Murmeltier what's your opinion on Vue, Svelte after a year?

good point, definitely right now, im using ref but who knows with future versions when patterns will change!

Actuallu reactive makes all nested props reactive so if u only want to make top level props reactive u can make a shallow reactive object...

thank you!

happy to help!

Definitely! Glad you think so

Hmmm. Is there someplace you read this? I'd love to see their reasoning. But in general, whether they're talking about refs (reactive data) or template refs, both work just fine inside v-for loops. Here's an example code snippet I made: learnvue.co/2021/06/the-beginners-guide-to-vue-template-refs-with-vue-3-updates/#using-vue-templates-refs-with-a-v-for-loop

If what you mean calling ref() to define a new instance of Ref inside the template, then they are right. We shouldn't do that. If what you mean using an already defined ref in the template, they are wrong. The difference is "instancing a Ref in the template" vs "reading a ref in the template" .