Vue 3: Reactivity Made Easy (ref, reactive, toRefs... oh my!)

hi, When would I ever use toRef or toRefs?

great explanation, thanks!

Tanks for explaining this methods so well ❤❤

Your skills in Vuejs are awesome.

Hey Erik, can this be done with a vanilla JavaScript class object?
I am currently attempting to use a custom class with Vue 3's reactive and it's not keeping the object's property values.
Cheers!

Is Vue still simpler than React to learn?

well, apparently they have put extra effort into making it as confusing as possible LOL

How do you type so dam fast, and move so fast

You are the best man, I can't describe my gratitude for your easy explanation

Vue’s weakness is there’s too many ways to do the same thing.

This all seems very promising and your video is pretty clear. BUT, please make a video working with real case reactive & ref objects. 'Cause there's a lots of weird situations like::
Having an empty ref obj and the assigning to it a few props, or dealing with arrays is quite a maze. I've most likely always ended up using ref. Otherwise is creates weird references between component state and pinia for example

Thanks for the content!

Thanks for making such great 👍 tutorials

so fast, this tutorial is even more confusing than vue it self

If you use options api it is reactive out of the box

Feel like sometime you write some codes because you have it on your other screen instead of explaining the actual "why" and "how it work"

did any one of the developers at vue stop for a second to think that people who use vue in their job might not be willing to relearn the same crap over and over again? i am currently unable to get a piece of text from the data i fetched because of this ref bs.

Hi Eric, I would like to tell you that there is probably a collision or some kind of error when two times the word ref is imported. I am thinking of importing ref from "firebebase/database" and "vue"....
have you ever encountered such a situation? I will probably have to separate a certain piece of code into a separate file

Made awesome Vue2 then complicate it, and it's Vue3.

I thought Vue was supposed to be "easier" to use than React. But if Vue is gonna become more complicated than it has known to be and tries to be like React, then I might as well just use React and not even think about Vue at all.

why do you use composition api every time? It's purely additive. Read the docs. I think you are low competence developer

Wow thanks you made me discover that we can use a "setup" script tag instead of a setup function for single file components 😮. I learned Vue one week ago, begining with the Options API, then switching to the Composition API, learning about class based components and now about setup script tags... That's kind of overwhelming and hard to know what's the most recent recommended way of writing a Vue app. 😅

i really dont understand why they change so much from vue 2 to vue 3, i know we can stil program like vue 2 in vue 3, but i woudl like to know what is the improvement at the cost of not doing things
straigforward like in vue 2?

Hi, nice vid.

How did you make those auto-comments in VS code ? Is there any command? Or is just an extension?

Thanks so much for this great overview! I did some Vue 2 code, and then I opened up someone else's program with some of the Vue 3 features in it (I didn't even know it at first). I saw this Ref<String> and unrefs everywhere and was like wtf is this! Your video saved me hours of pounding my head against the wall figuring out this code.

Question, how to use nodejs server in Vue Vite bundler.

It is too much strange to put Javascript code inside a string or double curl braces, both are JS code, there is no reason to put one inside double curl braces and other inside strings, they should change this, both React and Svelte do this the right way, using one curl brace for everything that is Javascript inside the template, doesn't matter if it is a children or an attribute

Nice video,

Hey Eric,

I have a problem. I just want to make a global variable isLoggedIn, that i can change to "true" or null. How can I do this?

Other great video!! Thanks Erik!

How about to make changes reactive from pure js?
1. Get element by ID
2. Change its value
3. This will update vdom?

I will soon be making Vue js tutorials

This is great stuff! Custom refs example was gold

Hey erik thank you because of you i found out vue and it's my favorite framework

Now I know how to make a cube: 10x20x33 …. Repeat after me, that’s a cube.
BRB… going under shower crying 😭

that's not a cube

Please help me, how to use trigger click button in setup() method in vue 3 (Vue 2 i used this.$refs in methods, but Composition API I can't)

We discovered a new type of cube which sides are not equal to each other 😂

Hello Erik. great video and thanks for sharing.
but one question..i see there seem to be massive change in the script block..no setting of variables on a data function etc it is just straight variables and functions like in Svelte..is that the new paradigm?

So unfortunately Vue is becoming more and more like React. I don't understand why you always have to complicate things that work well. It was already like that with Angular and now Vue is making the same mistake. Too bad. I will work as long as possible with Vue v2, it is fast, efficient and uncomplicated. Exactly what most developers want.

This reactivity feature very useful in Vue JS 3

Just a suggestion, you can tell more VS code shortcuts that you uses, like line delete, comment line, etc. I can search, but it will be more helpful to see what you are using and where, instead of reading about shortcuts.

Thanks!

Is Vue 3 essentially Vue 2 + Composition API ?

Wait, I didnt know you could get away with using your refs in the template without returning them first? I didn't like the composition API, because of how much I had to import things, or type extra, or worry about how I'm going to organize all the code. Do you think everyone should use the composition API? Or am I okay with sticking with the options API

nice ^) thanks