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

hey developers today i'm going to show you a few examples of vue.js's reactivity using ref two refs reactive and i'll show you how it works so the reason you may be interested in this is because with vue.js three these are the tools that you really want to use when using the composition api or when you're using the script setup so make sure you stay all the way the end and you can learn all the tips and tricks i think this will really help you out if you are running a production app or if you're learning vue.js 3 for the first time really need to understand these the different ways reactivity works and these different tools that you have okay so let's show you the basics of reactivity so first i'm going to create a new variable called count and i'm going to create an h1 here and show the count and you can see right away it shows up in my template but is it reactive or not so if i create a i know a button that says press me and i add a click handler to it that all it does is increment count will it work so for those of you who know vue you'll realize it doesn't work because this actually isn't reactive at all so in other languages and other frameworks you might use something called use state in sevelt you actually don't have to do anything but in view you actually import in this thing called ref and there's a couple of ways to do this i'm going to show you ref first from view and then you kind of surround the variable that you want inside ref and if we want to i know i'll put it at one and you can see here now it works so every time i click this it's being added in so that's perfect now what if we want to manipulate this ref inside this script at this top here so i'm going to create a new function it's called double and what double is going to do it's going to take this count and it's going to double it and you can see right away i have volar which is an extension for vs code and it auto added this dot value here so anytime you cite the script and you're using refs use the dot value to access access the value and to manipulate it so in this case i want this countdown value to uh times equal to well we'll do it like this we'll do count dot value times two so every time you uh every time the function runs it doubles it and if i wanted to i'll just add in double to this click handler and now when i press it it doubles as we expect it so it's working that's awesome now there's a couple of other little things with ref that we should take a look at the first one is called isref and the other one is called unref so unref is a way to access the value of a reactive proxy variable inside view so this countdown value if i want to i can just do unref and then pass in count and i don't have to put dot value and essentially what it does is you can wrap any sort of variable in here and if it's a ref it'll it'll display the value if it's not a ref it'll display the value as well so this is unref here and it's still working the same way i don't see people using this too often but it's nice it's there the other one is is ref in fact what unref does is just what they call syntactic sugar to do this so i can do check equals isref this what this does is you can pass it a variable and it'll give you a true or false depending on if you actually add it as a ref and in this case i can just pass in this count once again not with the value and if it's a is ref i can then just pass in i can do the count dot value but if it's not i'll just show the value like this and if i console well in this case yeah i'll console log this check it should be exactly the same as what we see on the screen so if i do this and i press it and then i look inside the console here you can see here it's 8 16 32 so it's exactly the same as the number here and it's just a little nice little function that you may need to use so another thing you should probably know about ref is that if you've come from the view two days you know there's something called ref that you add onto inside the template and you can actually still do that with view three so let's say this button right here i want to get access to it inside this script so i just type in ref and i don't know i'll call it button and then inside here i can do const button uh and i'll do ref here and what this will do is it'll actually give access and i can put i don't know an empty string in there this will actually get access to the template this button in the template so now let's say instead of doing this check here i'm going to actually grab the button and it has a value just like it's a reactive variable if i clear this and i hit the press me you can see right here at the bottom it says button so you can see it's working as as it did before uh now i could do manipulations to this button value it's like an html element i could change the text i can do whatever i need but now there it is so another really common thing that you might see is something called reactive so let me show you example that and just to make this easier i'm going to comment some of this out and i'm going to comment this out and this out i'm going to create something called cube so i'm going to create const cube and it's going to be reactive and i'm going to add in a couple properties to this cube it's going to have a length of i don't know 10. a width of 20 and a height of 33. so what i really like to use this is when i need to go in and i have a bunch of variables and instead of doing ref a bunch of times i want to kind of all group them together i use reactive it's personal preference some people use reactive in every single project some people use ref uh it's up for debate what's better but now you can see here i can come in here i can put this h1 i got my cube and if i did this right i should be able to grab like cube dot i know length and my autosense did recognize it there's ten so i could say okay length is 10 and i don't know i can even if i wanted to change this um i can delete this and i call this on a width and then i'll change this and i'll delete this to height if i did this right so here they all are and they're all showing up here correctly but you can see here this is cube.lane cube width cube.height isn't the easiest way to do it so there's a couple of helpers that make it so we don't have to constantly.cube.length now you might be thinking well yeah i can destructure this right so i can do let i know length width height like this width height and then have an equal cube well uh it actually won't work because these are reactive variables and it just doesn't work that way so to do the way there's two ways you can do it i'll show you the one the harder race there's something called two ref and two refs so it's kind of confusing but let's look at this first one it's called two ref and when i use two ref i could do something like this i could do const length equals and then i do two ref that's without an s and i pass in first the object which is the cube and then the the strength the key so in this case it would be i know length and now instead of doing cube dot length here i could just do length and if i save it and i come back over here it's still working it's exactly the same as it was before but you can see this is not much better than having to add in a bunch of refs and getting the values from each because you have to do this the three times you'd have to do like one for width one for height and one for uh you know basically one width height and length another way of doing this is to use something called two refs and i'll show you how that works so instead of doing two ref here we do two refs and the only difference has an s at the end and then you can destructure it out so we have length width height and now i can do two refs and then pass in cube and now i have access to all three of these so i can come back over here i can delete this cube width height cool and it's still working as it did before without any errors and all we did is made it much easier using this two refs now there's one ref that's really interesting that i'll show you real quickly i'm gonna copy and paste this for the sake of time it it's called the custom ref so if we come back over here and i just copy and paste this i have something called use the bounce ref here and i'm going to add this custom ref it's a really a way that you can create your own special reactive variables and you can set certain options when they get set and certain options when they need to be returned so in this case this is an option that every time you set it you can set a delay here so like a second or a second or two later it will display and essentially the way you create it is you have to create you wrap the return in a custom ref and then you have to pass it a function that has a track and trigger and the track always is put in the get and the trigger is always put into the set and it's a way for it's a basic way to create your own reactive variable so in this case any time you get used to bounce ref it'll just return the value but when you set it it'll take a timeout which you can set here about basically like a second and then it'll set the value so let's see how we can get this working and if i let's make double check to make sure i did this right i'm missing a ending bracket and now i should be able to try it out so i'm gonna i'm going to just real quickly comment these out and i want to test it out so i'm going to create just right underneath this function and this is probably something you would add into its own file and then import it in i'm going to call it i know test i'm gonna go use the bouncer f and i'm gonna pass in a string of hello and then i'm gonna create a new function called change make it simple as possible and all this is going to do it's going to take the test.value and equal to george so if i come back over here to my template i'm going to put back in h1 and i'm going to use this test that i just created and if i did this right it should show up and make sure this works i'll move this outside of this so now it's outside of it so here's my hello i'm going to add back in my button i'll call it press me and i'm going to add a click handler and it's going to run this change so now i press it i wait a 1001 cool it changed so it took about a second and then it up it changes i'll do that again press it 1001 cool it updated so it's not instantaneous i guess i could even make it like i know even longer if i wanted to so if you press it one thousand one one thousand two one thousand three there it goes so now it's been updated so this is a way you can do like specific uh reactivity i haven't used this too often but it's cool that it's there now the last thing i wanna show you real quickly is that this syntax where we're using this ref it there is going to be some ref what they call a sugar syntactic sugar with it that's coming in a future release i believe you can work with it right now but you have to do some some extra work to set it up but essentially what it'll do is you'll have this variable this dollar sign variable that you'll be able to put around the ref and then you'll be able essentially you can put double uh double dollar signs to be able to get the underlying refs and you can basically create reactive variables so it it looks like kind of a neat little syntactic sugar to handle refs and not having to put value everywhere so you may be seeing this in upcoming videos as soon as it lands i'll definitely be doing a video on it so if you guys like this video make sure you click that like button and also i'll give a shout out i do do mentoring so if you're interested in to deep dive into vue.js or your career and you need some help i'll put a link to my my mentoring i do uh i have a few spots open like barely i think i only have like two spots open so if you want to do that yeah check that out thanks i appreciate

Channel: Program With Erik

Views: 2,410

Rating: 4.9761906 out of 5

Keywords: vue js 3.0 tutorial, introduction to vue js 3.0, Vue.js, vue.js project, Vue.js 3 project, Vue.js Refs, Vue.js toRefs, Vue.js 3.0 Reactivity, How to use Vue ref, Vue ref vs reactive, Program With Erik, Program With Eric, Erik Hanchett

Id: sAj6tdVS2cA

Length: 13min 4sec (784 seconds)

Published: Mon Sep 20 2021