Stop Using .value with ref In Vue 3! Reactivity Transformed Explained!

#vuejs #vue3

👉Check out my last video on ChatGPT

👉 Sign up and get free Vue cheat sheets and updates!

👉 Need some help with a project, level up your skills, Vuetify or Nuxt bug? Check out my 1-on-1 mentoring!'

Links:

0:00 Introduction
0:32 How to use ref
03:22 $ref explained reactivity transform
04:50 reactive explained
05:56 Using reactive with composables
08:50 using toRefs
09:09 using $()
09:32 using ref with composables
13:26 conclusion reactive vs ref what to use

[jonasex]

I don't mind about the .value at all. If you sort of understand why that's like that and the proxy object, I'd avoid extra magic.

[drewbird]

I learned Vue and Vue 3 for the first time in early 2022 and these reactivity functions were some of the most confusing things to me. I think because it uses JS proxies under the hood; the Vue team wasn't able to get around this syntax. I looked into these macros too and decided that, in most cases, they add more complexity than they're worth. Except perhaps for some library writing ( probably a headache for something like VueUse ).

Thank you for the explainer!

[nthdesign]

If you are writing a complex app, the Composition API allows you to keep concerns like “data” and “methods” close together, and promotes code reuse through composable functions (“use” functions). That’s all very cool, and very useful! But…

For the majority of simple components I’ve written, the Options API is just easier. Plus, for new developers, the Options API’s rigid structure provides, well, *structure*!

I like that we can use both the Composition and Options APIs. They each have their use cases.

[todpale]

I think, the simplest way to use a reactivity is just using ref as you've shown in the second example. Yes, you need to deal with .value, but in fact it's not a big problem. It just depends on the preferences.

[kuti]

I never had a problem with adding the .value to manipulate the ref's value. These compile time macros look cool, but they add some magic that doesn't read as well as just using the API of ref, especially the $$ syntax is super weird for me.

[KirkWaiblinger]

Vue in general suffers from being insufficiently opinionated. Having ref + reactive + reactivitytransform, adds obscure, difficult-to-reason about syntax.... to what end? Save a few characters? All the $$ stuff makes it clear that this doesn't even abstract anything away from you; you still have to be very careful to not break reactivity. God forbid different developers mix the $ and ref styles within a codebase.

Pick a best practice. Use only ref always. Be explicit about .value since JS reactivity is always a leaky abstraction, even (especially?) with reactivity transform.

[Rmoore]

Vue3 got less intuitive than Vue2 with these .values. I can see why it went the way that it did, but it lost some of Vue2's magic. Thanks for this video, it helped clarify some things and showed some nice tricks.

[raulcalvo]

I have to use vue because I just began to work on a new project. But that $ magic looks like something I don’t want to see ever again

[maskman]

Vue is moving toward Svelte way of handling state, because with Svelte a state is simply a variable, we dont need to import 'ref' or 'useState', we simply do let msg = 'message' and it is automatically equipped reactivity feature, I assume all frameworks are mimicing Svelte/Sveltekit 😘

[alphaios]

I am using nuxt and vuetiify now to build stuff. It feels way nicer than this. I built a few apps with react, svelte and angular and now I'm trying to use vue because I've heard it's the simplest of the big 3, but I feel like maybe that was the case before and they are trying to add all the cool modern stuff and completely changing things in major releases. It confuses me when I'm googling problems. All the magic it does behind the scenes makes it harder to grasp. Angular is known as the most complicated, but at this day I would call it simplest of the 3 to grasp because you can figure out everything that is going on. It is very explicit. And svelte feels like the simple amazing one at the moment. What do you think of the differences? Are they complicating our lives with new releases or making them easier?

[_fntn]

I prefer using refs and calling the value method. It lets me know at a glance that the object I'm working with is reactive.

[SXsoft]

just going to be honest, I find the options API cleaner, then again I am a Laravel(PHP)+JS developer, not a "pure" JS developer

[szuszpanczyk]

I'm struggling to understand why he faced this problem in the first place. Why would someone write the Vue component's script block this way and not keep the variables in the "data" block where they already are reactive...?

[codewithguillaume]

So interesting. It is the big change between vue 2 and vue 3!

[TheOneAndOnlySecrest]

Thanks for your showcase Erik.
I prefer using ref and shallowRef only and always add .value because less compiler magic usually leads to better code imho.
But The vue team definetly does a great job introducing convenience features for simpler use cases.
For libraries I would stay away from using such features until they are polished enough :)

[dasatraMedia]

Well, in my opinion..
I'd prefer how vue 2 treat data / value in a simplest way..
Vue 3 make me learn Vue start from all over again.

[kylelogue]

Just an FYI, if you look at the docs about the Reactivity Transform, this experimental feature was removed.

[lewisking]

All of this just makes me miss Vue 2 😂

[sam_fujiyama]

Great explanation and examples Eric, you are a natural teacher. While i can see the benefits of using $ and $$, from a readability perspective i find them unintuitive and confusing... more like syntatic salt than syntactic sugar.

[fimdan]

Thanks. Would love to see another video about reactivity in Vue 2.7 along with a comparison of composition api between 2.7/3. This would be helpful with migrations.