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

preview_player
Показать описание
#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
Рекомендации по теме
Комментарии
Автор

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.

jonasex
Автор

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!

drewbird
Автор

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.

nthdesign
Автор

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.

todpale
Автор

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.

kuti
Автор

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.

KirkWaiblinger
Автор

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.

Rmoore
Автор

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

raulcalvo
Автор

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 😘

maskman
Автор

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?

alphaios
Автор

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.

_fntn
Автор

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

SXsoft
Автор

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...?

szuszpanczyk
Автор

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

codewithguillaume
Автор

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 :)

TheOneAndOnlySecrest
Автор

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.

dasatraMedia
Автор

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

kylelogue
Автор

All of this just makes me miss Vue 2 😂

lewisking
Автор

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.

sam_fujiyama
Автор

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.

fimdan