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

  Рет қаралды 49,627

Program With Erik

Program With Erik

Күн бұрын

Пікірлер: 78
@N32-e1g
@N32-e1g Жыл бұрын
You are the best man, I can't describe my gratitude for your easy explanation
@WinstonCodesOn
@WinstonCodesOn 2 жыл бұрын
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 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.
@HadayatNiazi-xp1fz
@HadayatNiazi-xp1fz Жыл бұрын
Your skills in Vuejs are awesome.
@TheMitchingHour
@TheMitchingHour Жыл бұрын
Vue’s weakness is there’s too many ways to do the same thing.
@shaineelnayak3465
@shaineelnayak3465 3 жыл бұрын
Hey erik thank you because of you i found out vue and it's my favorite framework
@Arabian_Abomination
@Arabian_Abomination 3 жыл бұрын
I will soon be making Vue tutorials on my channel 😊
@Mehdi_Fyber
@Mehdi_Fyber Жыл бұрын
Tanks for explaining this methods so well ❤❤
@ProgramWithErik
@ProgramWithErik Жыл бұрын
My pleasure 😊
@dvdrtrgn
@dvdrtrgn 3 жыл бұрын
This is great stuff! Custom refs example was gold
@loic.bertrand
@loic.bertrand 2 жыл бұрын
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. 😅
@musha3368
@musha3368 2 жыл бұрын
Go with vue 3 script setup
@sergenorin
@sergenorin 3 жыл бұрын
We discovered a new type of cube which sides are not equal to each other 😂
@ProgramWithErik
@ProgramWithErik 3 жыл бұрын
hahah! That's a good point!
@olehbaranovskyi2219
@olehbaranovskyi2219 Жыл бұрын
great explanation, thanks!
@ProgramWithErik
@ProgramWithErik Жыл бұрын
Glad it was helpful!
@Dipenparmar12
@Dipenparmar12 2 жыл бұрын
Thanks for making such great 👍 tutorials
@kaleabwoldemariam4288
@kaleabwoldemariam4288 2 ай бұрын
I'm building a simple blog app with interactions (like,dislike, share). But I get inconsistent count on the template. I'm using sessions for anonymous users. I want to display total interactions across users but when I refresh what I get is count for that session? Any guidance?
@sangnguyenquang7208
@sangnguyenquang7208 Жыл бұрын
hi, When would I ever use toRef or toRefs?
@metronomo1676
@metronomo1676 3 жыл бұрын
Other great video!! Thanks Erik!
@kwesikwaa
@kwesikwaa 3 жыл бұрын
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?
@ProgramWithErik
@ProgramWithErik 3 жыл бұрын
Yes! It's a lot like Svelte in that regards. You still need to surround reactive variables though with ref or reactive.
@kwesikwaa
@kwesikwaa 3 жыл бұрын
@@ProgramWithErik snap! this is amazing! Thanks!
@jafetsierra1875
@jafetsierra1875 2 жыл бұрын
Hi, nice vid. How did you make those auto-comments in VS code ? Is there any command? Or is just an extension?
@WaleedAsender
@WaleedAsender 2 жыл бұрын
Win: Ctrl + / Mac: Cmd + /
@tony-gx7rt
@tony-gx7rt 9 ай бұрын
so even if use toRefs(cube) to manipulate values i haves to use length.value, width.value etc?
@despertaweb4793
@despertaweb4793 2 жыл бұрын
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!
@despertaweb4793
@despertaweb4793 2 жыл бұрын
Summing up: "Reassigning objects is possbile with Ref." That means you can destructure an object into a reactive REF one and bulk in there the props with it's values. Also alows to add new ones!
@eotikurac
@eotikurac 2 жыл бұрын
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.
@GergelyCsermely
@GergelyCsermely 3 жыл бұрын
Thanks!
@merlinchiodo8943
@merlinchiodo8943 2 жыл бұрын
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?
@zombaju
@zombaju 2 жыл бұрын
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
@AndrewRusinas
@AndrewRusinas 3 жыл бұрын
Hey Erik, thanks for the video! I want to ask a question. In Options API we could predefine our (in a lack of a better term) object model in data object. Like this: data: { task: { name: null, status: null } } And then fetch it from backend and fill those null's. So, when you define in your template task.name you don't have to check out if a task object exists. How should I do this in Composition API? Right now I figured out one option, which is not the best in my opinion: Predefine it like this: task = reactive({ name: null, status: null }) and then, in my getTask function, manually assign each of the properties (task.name = data.name, etc). Oh, KZbin isn't the best place to ask a code questions lol.
@AndrewRusinas
@AndrewRusinas 3 жыл бұрын
I also curious how to properly set watchers in this case, if I want to watch changes in task object. Previously did it with deep: true, what about new API?
@adriatic123
@adriatic123 2 жыл бұрын
Question, how to use nodejs server in Vue Vite bundler.
@rhiox7705
@rhiox7705 2 жыл бұрын
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?
@Undwell
@Undwell Жыл бұрын
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!
@mswondo
@mswondo Жыл бұрын
I think its can we mimic this, using event mutation observer.
@jorgebarragan8521
@jorgebarragan8521 2 жыл бұрын
Nice video,
@Arabian_Abomination
@Arabian_Abomination 3 жыл бұрын
I will soon be making Vue js tutorials
@ultimategolfarchives4746
@ultimategolfarchives4746 2 жыл бұрын
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"
@toanvuongxuan2353
@toanvuongxuan2353 3 жыл бұрын
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)
@ProgramWithErik
@ProgramWithErik 3 жыл бұрын
Check out the button example with template refs in the video!
@yanyam7700
@yanyam7700 3 жыл бұрын
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
@wobsoriano
@wobsoriano 3 жыл бұрын
Use what you want to use. Options API or Composition API (setup() {} or )
@spyxd5245
@spyxd5245 3 жыл бұрын
You can install a package called 'unplugin-auto-import' and you no longer have to import anything which is super convenient. For me, about the code organization, I just put the same type of objects together much like in the options API. All the refs, consts, computeds, functions, etc stick together in their predefined sections.
@yanyam7700
@yanyam7700 3 жыл бұрын
@@spyxd5245 I'll install it and see if it helps me transition for bigger projects
@blank4157
@blank4157 3 жыл бұрын
He is using script setup which is a syntactic sugar for setup function. In this syntax, you don't have to return refs, computed etc. and you even don't have to register the components. Anything specified at top level becomes automatically available in the template, which allows you to write lesser boiler plate code.
@yanyam7700
@yanyam7700 3 жыл бұрын
@@blank4157 Yeah all of a sudden now i like the composition api hahaha
@kirillbaryba746
@kirillbaryba746 3 жыл бұрын
nice ^) thanks
@mgcmsn
@mgcmsn Жыл бұрын
Is Vue still simpler than React to learn?
@andristefanus
@andristefanus 2 жыл бұрын
so fast, this tutorial is even more confusing than vue it self
@LeoPlaw
@LeoPlaw 3 жыл бұрын
Is Vue 3 essentially Vue 2 + Composition API ?
@blank4157
@blank4157 3 жыл бұрын
No, vue 3 offers additional features like teleport, suspense components, fragments (ability to write multiple root elements in a component), support for multiple v-models on same component, a proxy based reactivity system that removed the caveats we had in vue 2, concept of having multiple isolated vue apps in a single project and a couple of minor breaking changes.
@ProgramWithErik
@ProgramWithErik 3 жыл бұрын
That's a good summary!
@RianY2K
@RianY2K 3 жыл бұрын
This reactivity feature very useful in Vue JS 3
@ProgramWithErik
@ProgramWithErik 3 жыл бұрын
Yup!
@PriyankBolia
@PriyankBolia 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.
@ProgramWithErik
@ProgramWithErik 3 жыл бұрын
Thanks for the tip! I'm using VIm extension with VSCode, and I know some of the shortcuts, but I can probably learn a few more
@AmitKumarKhare
@AmitKumarKhare 2 жыл бұрын
Made awesome Vue2 then complicate it, and it's Vue3.
@Pochinator
@Pochinator 2 жыл бұрын
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.
@kaibe5241
@kaibe5241 2 жыл бұрын
There are times when you need to use the API, but otherwise, just leave it to vue js to handle.
@osmelguarepo6523
@osmelguarepo6523 3 жыл бұрын
How about to make changes reactive from pure js? 1. Get element by ID 2. Change its value 3. This will update vdom?
@micemincer
@micemincer 2 жыл бұрын
If you use options api it is reactive out of the box
@p19shelt
@p19shelt Жыл бұрын
How do you type so dam fast, and move so fast
@andreaskarz
@andreaskarz 3 жыл бұрын
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.
@blank4157
@blank4157 3 жыл бұрын
You can still use vue 3 with options API, it's not like the options API is gone for good, it's still supported and works the same as in vue 2.
@yusifkatulie3817
@yusifkatulie3817 2 жыл бұрын
i cannot agree more
@mardix
@mardix 3 жыл бұрын
Now I know how to make a cube: 10x20x33 …. Repeat after me, that’s a cube. BRB… going under shower crying 😭
@ricko13
@ricko13 Жыл бұрын
well, apparently they have put extra effort into making it as confusing as possible LOL
@gmkhussain
@gmkhussain 3 жыл бұрын
// According to the #Vue2 docs, this should be 1 // According to the #Vue3 docs, this should be 2 // They are both wrong! ⚡ 😂 ❤️
@ProgramWithErik
@ProgramWithErik 3 жыл бұрын
What should be #1?
@DanielRios549
@DanielRios549 2 жыл бұрын
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
@justincode327
@justincode327 3 жыл бұрын
that's not a cube
@ProgramWithErik
@ProgramWithErik 3 жыл бұрын
Yeah lol
@justincode327
@justincode327 3 жыл бұрын
@@ProgramWithErik hahaha anyway nice video
@chikenmacnugget
@chikenmacnugget 2 жыл бұрын
why do you use composition api every time? It's purely additive. Read the docs. I think you are low competence developer
@alvaroperezdiaz3679
@alvaroperezdiaz3679 2 жыл бұрын
docs says that it's not a good practice mix option with composition API. I don't see the problem of using composition API every time
Stop Using .value with ref In Vue 3! Reactivity Transformed Explained!
14:22
Vue 3 Reactive Data | Ref Vs Reactive in 10 Minutes! (ish)
13:08
John Komarnicki
Рет қаралды 19 М.
HELP!!!
00:46
Natan por Aí
Рет қаралды 37 МЛН
Миллионер | 2 - серия
16:04
Million Show
Рет қаралды 1,9 МЛН
小丑揭穿坏人的阴谋 #小丑 #天使 #shorts
00:35
好人小丑
Рет қаралды 35 МЛН
ЗНАЛИ? ТОЛЬКО ОАЭ 🤫
00:13
Сам себе сушист
Рет қаралды 3,9 МЛН
Every New Vue Developer Has Made These Mistakes...
18:04
Program With Erik
Рет қаралды 45 М.
Vue.js Tips: Use Slots The Right Way // VUE.JS SLOTS TUTORIAL WITH VUE 3
11:59
Vue 3 Script Setup, The Future Of Vue? Tutorial And Setup
25:08
Program With Erik
Рет қаралды 59 М.
Vue.js Advanced Data Provider Component Patterns Explained
14:07
Program With Erik
Рет қаралды 23 М.
Learn Vite with Evan You
13:35
Vue Mastery
Рет қаралды 267 М.
Vue State Management Pinia Crash Course - Pinia Tutorial Vue.js 3
15:42
Program With Erik
Рет қаралды 49 М.
A Better Way To Create Vue Components With Props Using TypeScript
12:40
Program With Erik
Рет қаралды 10 М.
Vue JS 3 Reactivity Fundamentals - Composition API
21:59
Marius Espejo
Рет қаралды 6 М.
Vue 3 - What's New? What Changed?
30:47
Academind
Рет қаралды 131 М.
HELP!!!
00:46
Natan por Aí
Рет қаралды 37 МЛН