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

hey developers what's the difference between reactive and ref what is this reactivity transform and how do we deal reactivity inside our view 3 application so you can look in the description I'll have links if you want to jump around but basically we're gonna look at ref reactive what's the difference and we're going to jump in some code so I think you're going to learn a lot make sure you watch all the way to the end hey and if you like this video make sure you click that like button and if you like this this is my new Lego set that I just created yeah if you can leave a comment about that that'd be awesome I think it looks kind of cool I don't know okay so I have inside here this will be my online editor I'm using the view single file component playground which is at sfc.vjs.org and I thought I'd just play around here and let's first take a look at what ref does and what reactive does so inside the script setup here we know if we just create let's say a variable called message and we called hello world if we use the double double curly brackets and we do message here it shows up kind of as we expected did that makes a lot of sense but if we wanted to change this and make it reactive in other words that way if things change inside our script tag it also changes inside the template then we have a problem so if I do I'm just going to make an on click Handler here and this is just going to do message equals new world and we know that we can create a button and inside this button we're going to have it I don't know just call change and we'll have an at click Handler and this click Handler we'll call this on click so if we click this button here it's not doing anything it's you still see it says hello world so since we're using script setup we're not using the options API remember if using options API you would use this data object and use this export default we need to use something else so this is where we can Import in ref so to do that we do import ref from View and now if we surround this by ref and you go like this uh now this message it's actually a DOT value so you have to use a DOT value afterwards and if we do this and click change it now is reactive so that way we can change it inside the template to get if we change inside the script setup it updates in the template and that's basically how ref works now ref can be a primitive like a string it could also just be a number if we wanted it to be so we can just make it I don't know 10 and same thing works you can actually have it be an object as well so if we want it to be I don't know we could have this called value equals 10 here and now you can see here is just printing out value 10 so I could do message dot let's instead of calling value that's kind of confusing let's call it message dot num so if we call message dot num here you can see it shows 10 you can change it now this message.value is now just changing it it completely reassigns it to New World so if we wanted to kind of do this the right way we'd have to change this to an object but we won't do that right this second so this is pretty straightforward now there is a new way of handling this one thing that I really bothered about is using this dot value everywhere because it's really easy to forget if you're using volar which is a extension inside Visual Studio code it automatically like just adds this dot value to everything which makes it a little bit easier if you're using any of these reactive variables what you can use is there's this new reactivity transform which is an experimental feature that you can opt into so if you're going to use this in your own in your own app applications if you're using V you just add reactivity transform true like you can see down here if you're using view CLI you can you can also add it to this config and module chain webpack but once you do that you can actually have options to use these compiler time macros so instead you don't have to import any of this in instead of being able to do uh let's just change this back to 10. um and then if we change this back to message here you can see now changes to new world if I put a dollar sign here I no longer have to put dot value in so anytime I refer to message here and I click it it just works so if I keep the dot value here it's not going to work but if I change take the value out then it works so now I'm back to New World so that's kind of a nice little trick there I believe this will be turned on and it and into in newer versions of view I think you have to add 3.2.5 or later to use this experimental function but I'm almost there in 2023 they're just going to turn this on for everybody but it just makes it a little bit easier now let's take a look at reactive so instead of doing ref here I'm going to add in reactive and I'm just take this dollar sign out and I'm going to make this reactive now one thing with reactive you can see reactive is actually only an object so you can't really put Primitives in here it doesn't really work so if I do message.value here like this doesn't really work or anything but it's it's really meant for reactive objects so if I put here and I put num equals 10 and you can do message Dot uh numb here you see it definitely works now if you want to change it you would have to change message.num to equals new world and then it works so you can't do wholesale reassignments like this like you can do with ref so this doesn't work you would actually get an error in the console so that's a little bit of differences so ref can be an object an array can be a primitive well reactive is just objects or arrays so in this case we have num 10 here we have the message equals new world so other than it can't being resigned it can't be a primitive there's another couple of little bit differences if you're using reactive over ref so let's come back over here I'm going to create a new file I'm going to call it use name.js and what this is going to do is we're going to import in ref and reactive from View and we're going to export a function called use super hero so it's just gonna it's gonna export a superhero name so I'm going to create something called name here and this is going to be reactive and it's going to have a first which is on gym and it's going to have a last which is going to be Gordon and you can see here that's it and then we're just gonna have it return the name and now we should be able to import this in here so inside our main one we're going to import in and since we call it use superhero probably should be the same name but that's fine for now use super hero from dot Slash use name.js cool now if you wanted to grab the information out of here you could see this is reactive as a first and last name we can try to destructure it out and this is something you do all the time in software development especially in react programming is you always destruct your stuff out so if I want to const and I want to get the first and last name out and that's from the use superhero so now we have access to the first and last and if we look at it inside here I'm just going to get rid of this I'll put double curly brackets first you can see here's the first name and if I put doubly curly back it's last here's the last name but one thing you'll notice right away is that it's not reactive so I'm going to come back over here and I'm just going to put some double curly brackets here and if I do uh first equals uh Bob and we'll make this let for now and last equals test and I hit this you can see it's not doing anything in fact if we looked inside the console we would see an error because this first and last is not reactive at all so we've kind of lost the reactivity of this because we're destructuring a reactive and that's one thing you have to realize with reactive and so if we want to bring reactivity back in we can use something called two refs so I can bring two refs in and then if I surround this two wraps from this new superhero it basically like converts it back into a ref so if you see it still doesn't work but now if I do first dot value and last dot value and I hit Click Change here now it works so basically as the reactivity back in and now it's basically makes them ref so you can do first uh first dot value and last dot value which is pretty neat and if we didn't want to use the dot value since these are basically refs we can surround it Paul by this question mark again and then you can get rid of dot value and I've hit change it works now because basically we this converts it back without the value but they're still reactive so that's pretty interesting but if you look at the official view documentation they recommend using the ref value so let's say let's take a look how refs would work if you're using a composable like this okay so I'm back inside my composable here that I've created called username and instead of using reactive here I'm going to add in ref and we're gonna call this first and we'll call this Jim and it will do last equals ref Gordon and then instead of just returning one thing we're going to return an object with the first and last and by the way this is just a shorthand for doing first last like this so now we've passed in two refs back outside of this composable so this obviously is wrong so we're going to go like this for use you superhero now if you destructure it like this I'm going to get rid of this you can see it definitely works right off the bat you're seeing uh first and last here and if we try to do it though if we do first dot value last stop value and we hit change it works so this is actually a little bit easier than using reactive we don't have to use those two refs we don't have to do anything like that it just kind of works uh everything as you expect it right out of the box but you may be wondering hey I just showed you this really cool way using reactivity transform what happens if I use that inside a composable so let's say for some reason that you wanted to use that here inside the reactivity transform using this everywhere so you do dollar sign ref here dollar sign ref here and now you're turning returning you're still returning first and last so it's back to Jim Gordon if you click change it actually doesn't work it actually gives you an error that this value doesn't have there's no dot value on this first and last because what's happening when you use this dollar sign ref it's basically returning first dot value and last dot value so it's just returning that string there's no dot value on it so you may run into this instance where like well now what do I do here I'm returning these values I can't use dollar sign ref because what happens if later if I want to just do first equals Bob or something like that um and you didn't want to have to dot value everywhere you're kind of in this this problem so what you can do is you can kind of convert it back over again so what you would do is you can put dollar sign dollar sign and surround the whole object and that'll basically add the reactivity in so anytime you're like passing something from one object or from one file to the other and you're returning things and you're using this reactivity and using these compile macros for the reactivity transform make sure you use this dollar sign dollar sign so now if I do that come back here it's working as we expected again which is pretty neat but then again you're thinking well once if I want to get rid of dot value here well you can add it back in here so I can put dollar sign here and now I can get rid of dot value I'm destructuring reactivity still works everything still works so this is the recommended way of doing it inside uh the end time you use composable so this can be like a really easy store let's say you wanted to create a quick store inside your view app and you're trying to pass and save information between multiple components you can use this rough and reactive to do it and this makes it just kind of easier to work with so you don't have to use dot value everywhere I'll also keep in mind this reactivity transform I'm only showing you examples using ref but it's actually available for computed shallow ref custom ref and 2 ref and those are all instances where you have to use that dot value everywhere so it's it's it's very very interesting and and helps a lot it also works with typescript I'm not going to go into all the details but I'll leave a link to this uh in in the notes so this is really interesting so this goes back to the last question we had at the beginning what would I recommend it's I really like ref refworks great everywhere um so does reactive I don't really have a huge personal opinion on it I guess if you want the simplest way use ref everywhere since it uh supports objects arrays and everything and it works great if you're importing it or using uh composables um if you're in a very simple project and you have a lot of data reactive works great well as well and then you don't have to use these compile macros and you don't have to use dot value everywhere so that could be an option too I don't know I don't have a big personal opinion I leave a leave a comment below with what you think the best way of doing this is I hope you guys learned something uh this is really interesting the direction view is going I really appreciate it and make sure you share this with someone if this was helpful for you thanks

Channel: Program With Erik

Views: 33,260

Keywords: Ref, Vue.js ref, Vue.js reactive, Vue.js component, Vue component design, Vue vs Ref, Rev vs Reactive, Reactive design, Program With Erik, Program With Eric, Erik Hanchett

Id: lJ6mUrZfbWQ

Length: 14min 21sec (861 seconds)

Published: Tue Jan 03 2023