Build with Ben: Overview of Vue 3.2 and More!

so welcome everyone we're here today because we're here to talk about view 3.2 for today's build with ben sessions so i say you know what let's just let's uh that's not what i let's see close that close that close that because what we want to talk about is right here view 3.2 so why are we making such a big deal about 3.2 after all right it's a minor version it's not like we've gone from view three to view four but the truth is is when it comes to this particular minor version there is a lot to be excited about and that's what one of the reasons i think 3.2 is such a big deal is that a lot of things have been shipped so basically for those who are using vue 3 at this point uh basically the recommendation going forward is just move let's start to upgrade all your dependencies to use 3.2 going forward because there are some there are some call it minor features that we've released that make it quite like a decent boost from like a performance perspective and that kind of stuff but we'll talk about that as we go through so i figure um the blog article is there for your reference so we're not necessarily going to walk through uh like step by step of everything but i figure we'll kind of use it as like a guideline for an agenda so we can kind of talk through different things and then use that as a way to just sort of uh initiate conversation so with that let's go ahead and kick it off oh i just realized why is my my descript video is just like hanging out in the bottom over there oh interesting i think d so check this out so here's um d script has my i think face as an overlay and i guess it's putting it here so right now it's recording the screen and with the theoretically record my face on here uh with that but it's a little bit odd because i yeah i don't know i i'll mix feelings about that we'll see how it goes um maybe for this episode when i upload it my face won't be in it but we'll see we'll see how it how it works out all right so i was trying to test something earlier and botched so let me go ahead and remove delete me from it and let's go ahead and create a veet app that was not what i wanted okay so i'm going to create a veet app because i'm going to use veet as our basically underlying scaffold to play with view three so that's going to go ahead and do that and i just realized i didn't actually give it a project title so oh that's one of the things i wanted to start doing going forward actually is to create repos that are tied specifically to the episode and session so that people can have uh that with them so this is uh session 12 so i think i'm going to go ahead and just be a little bit oh 12 nah just 12. all right so bill with ben 12 we're going to go with view regular view and that's that okay perfect so we're gonna go with build with ben session 12 okay then we're gonna if this works hopefully oh actually let's uh get a knit and it's been a knit perfect and then let's add everything and say this is a confit i always debate whether an init is like a config or a feature i guess it's technically a feature because there was nothing there before so add v view three scaffold all right wonderful now here's the only part where i'm not sure because i i was having a little bit of issues with github earlier i'm not sure if anyone else was build with ben public yes will this work yeah something went wrong executing the query i thought so github is having problems right now so no worries we can you know commit and do all our stuff here but just know that when github is up and running we're going to go ahead and make sure that there's an actual repo created for this okay that said let me run yarn to get everything installed and in the meantime we're gonna go ahead and open this up in vs code all right excellent so vs code is open it looks like we're good there this has been installed so let's go ahead and kick off the dev server veet is up and running okay so port 3000 let's move this over to the third let's move vs code over here so this we're going to bump up a little bit so it's easier people to see and the same thing as well so we go out here inside of vs code let's change the zoom level and i think 2.5 is what i had kind of established as like a good oh that might be a little much too i think we'll be fine okay so if you're having any trouble at all seeing the screen please let me know but hopefully this is boosted enough that you have the ability to basically see everything all right so first thing first is that script setup is now no longer experimental so if we go into source go into app uh we'll see that this right here is no longer supplemental so this comment will eventually disappear so i'm gonna we're gonna go ahead and assume basically if you're here and you're watching and we're talking about view 3.2 you're this is kind of you're one of your first exposures to script setup and so we're going to go ahead and kind of review that as far as what it is so as far as script setup goes most of you when it comes to vue are most likely used to this style of syntax where your components are defined as part of your options of your app and this has been basically the way things have been done in view for all of time that said there comes a point where especially as things like composition api have been introduced and we're starting to get a lot of optimizations when it comes to what the browser can do and like the engines for javascript then it's a big question of like is this really necessary right if by the like if we think about it from like designing an api perspective you have actually declared that this is something you want to import and again assuming that the compiler can actually understand that like you're importing a component one would then assume that you actually want to use said component and so similarly as well we have for those who are using composition api and the setup functionality let's say again let's do the uh for for sake of easy demonstration the counter example right so you have current count and then you have the ability the desire to white to want to increment the account so you'd have your button and you have your click and you'd have i can't type today increment count so and then you have increment right so we save this right nothing changes uh and so oh i just realized the hello world it actually has a count in itself but that's totally fine we're just going to demo this so set up here right what we would have to do is we typically have to uh do a cons current count and then again we're just going to use ref in this case so we'd have to manually import our helper method from view and then once we have our ref we would say oh we have a method called instrument count where it is a function and that function will take currentcount.value and increment it and then we have to return currentcount and we have to return increment value because again from like an api declaration perspective this actually does make sense right you're in a setup function you're declaring these things you want to tell the component what it is that you want to use and so when we save this we'll see now that if we click on increment this is working and to show that this actually did work i'll make this plus equal 10 for example and save and now let's go 10 20 30 40. so this is different from this count so that's nice but script setup along with like as we see the javascript frame was trying to progress forward we were thinking like how can we make like basically how do we improve on the developer experience right maybe it's not necessary for those who are opting into a pure composition methodology to actually go through all this boilerplate because after all this is a fair amount of boilerplate so what was proposed basically is that if you're pure if you're going to be pure composition api in other words you're not using any options you're not exporting a default object well then your answer is let's just turn the whole block basically into a setup method and that's kind of the best way to think about it is that you've now condensed everything all the options disappear and now everything is up to you to configure so what happens in this setup well in this case we no longer have any object to export so this disappears and like i said we no longer have a we're in the setup method already so this method here this is redundant and then once we're in here though you might be thinking okay well this means i need to return something right and so a lot of kind of discussion has like has been sort of thought through on this particular end but in the same way that i was saying that if we're importing a component really the compiler should you know that's the whole point of a single file component right you kind of know what's being used what plan i'm being used at least on the theoretical side then why can we also use that to infer what's actually being used so basically in the new script setup block this even disappears as well so now your code is consists of one two three four five six six seven seven lines so if i save this and refresh and show you nothing has changed whoa i did not mean to hit that uh let's see let's make this 20 instead so now you'll see 20 40 60 80 boom boom boom boom done and so to plans comment uh here in the chat um absolutely right there's no more i forgot to return it i you know i need to do this now like it just i mean it just works and to me this is a quite a big improvement when it comes to that developer experience for particularly for those who are opting into that uh pure composition api uh route and the nice thing about script setup is since it's built right into view this is something you can opt into at a component level this is not something where a collet you have to enable on a global level and say oh well you know this now means that every single component must use script setup nope uh true to the view ethos you pick and choose what works best in your particular scenario so in the event you're still in them like not even still there's nothing wrong with this let's just say you want to use both composition api and object uh options sorry not object if you're using options and you know you're sort of in a hybrid mode then yeah you wouldn't use script setup and you're totally still you can totally still use the setup method and do all the returns and that kind of stuff so you have sort of like the call it in some way best of both worlds like of like the hybrid approach but i know that there are also plenty of code bases right now where a lot more people are moving to pure composition api and to me that is what's the most interesting to me and what i've always loved about the vue ecosystem is that you have a choice you have a choice to make the best decision for you and your team and your code base and so certainly with now the script setup honestly this is basically one of like a huge improvement it says now it's stable it's no longer experimental meaning it's going to be around and so yeah so that's one of those things that has been released in 3.2 so right up here we just covered script setup uh the next thing i want to try out real quick in here is actually something that is currently in an rfc so let me do uh view rfc view rfcs here we go and then in the rfcs there's something called the uh oh no it's in pull requests rough sugar take two uh the idea behind this particular rfc which for those who are new to the acronym stands for request for comments in other words like their proposals to what we're thinking about changing or adding to the framework and so people get to you know weigh in on that discussion and say like well what about this and how about you know those kind of things and it's it's a nice way for the community to chime in as they as they want and so for this particular case you'll notice that when it comes to ref one of the problems and like i wouldn't say i say it's a criticism because i think it's an extra barrier that i would prefer people not having to jump through is that when we we at one when we import ref and use ref anytime we want to access the value of it it requires us to basically do this current value dot value and then do the thing and to me this is not very intuitive from those who like especially if you think about like your basic javascript knowledge when you want to assign a variable and you say cons my list equals one two three like you're not gonna say like oh well if i wanna use my list so cons my new list equals my list like dot map you know dot value dot map and then we iterate every other item and return item times two like that's not how you would do it normal javascript would actually literally just be my list.map item like and that's why i say normal because uh there's certainly ways when it comes to getters etc things start to change a little bit but as far as like standard as like low level or not level i guess like standard javascript that most people are used to this is what they're they're looking for and it is for that reason why up until this point i have basically been recommending that rather than use ref i really think people are better off using the reactive object which kind of removes uh that caveat of needing to access things by dot value and so to i realize for those who don't know what i'm talking about basically there's a second method here uh that we could import called reactive and the way this would work is we would say something like count data equals a reactive object and in here we would go like current count and then let's just say current count is 88. and so the reason this is nice is because now if you say like we have an increment new count right then this would be uh basically the equivalent we would write is current uh sorry current count data dot current count plus equals you know 12. and that to me is a lot like nicer from like uh mapping to what we're normally writing in javascript so with that said uh there's basically a proposal to have rather than having to have these helper values and sorry not rather because they'll still exist as in addition to enhance the the experience of writing with ref what if we had this bit of sugar basically like a global method ref that allows us to access those things without all that hassle so i'm going to go ahead and delete that again and let's go ahead and change this to 50 to make sure everything has changed and saved accordingly there you go 5100 we're good so the idea here is that if we go ahead and prefix this with a dollar sign and i think delete this and i think i delete this and save oof it did not like it okay compiler sugar is experimental proposal must be enabled in compiler sfc options oh how do i do that okay view compiler sfc options how do i enable that let's see let's see documentation scaffold i'm kind of curious where that is if that if that's because i kind of wanted to play with it you should steal reactivity from svelte um you know thesis i i think all javascript frameworks look at the different ones and so i think this is where some of this has been inspired as far as like you know looking at how others are doing it and where like you know understand what the community is excited about so felt is one of those examples where i know there have been discussions on like you know what are they doing well and i think this is i honestly i think that this is a good thing uh one of the problems i've recently seen with kind of it's not even a recent thing a general trend amongst tech the tech community is i tend to see this desire of like who will be the future and who will win the battle and to me it's like well how about we all solve different problems have unique requirements it'd be nice if we could all just keep learning from each other and not worry about like a winner take all situation where like there has to be one that dominates and i think part of that unfortunately comes from a bit of an artifact where prior to the internet making everything kind of so open and people having access to technology in ways that wasn't available before it allowed for call for kind of these it single libraries to really be the dominant force so the best example of this that comes to mind for me personally is jquery in that like there was no or like in a sense that jquery really did kind of end up dominating the way a lot of people did build websites for a period of time and while i'm sure people i would be shocked if i was wrong about this historically there most likely are people who try to create alternatives to jquery but it just really it just didn't gain traction the way that jquery did so that said yes things like svelte i mean even things like petite view actually are from what i can tell inspired from things like alpine so yep uh so the thing let's see uh yes so thesis with the joke here view four without ref or reactive i mean remember the ref reactive is partially because we wanted people to make their code more performant when they didn't need reactivity and so i think one of the things if i'm not mistaken with svelte is that it shifts its own compiler i think so it actually does something different than the normal javascript engine and i think this is a push and pull right i don't think this is not a right or wrong thing to be to for the record this is not a right or wrong thing i just i just know that when it came to the view approach we tried as hard to stick with the native javascript engine and try not to really mess with that and this is why a lot of the syntax that we actually see in view are designed to be progressive enhancements on what already exists on the web and so for example one of the major criticisms that i think i often see a view is like i don't like the template syntax right like it looks it looks so weird let me like for example right it looks so weird that we have you know like when we want to bind something right that we have to like do like a v bind or prefix it with a colon and then we have to be like count equals and then we have to deal with the the you know quotation marks and then say this is equivalent to current count and what we really should have right you know because we're used to jsx this is what we want we want the ability to say it's like count equals you know this curly brace syntax this is much cleaner and i would argue from a like visual perspective and like immediately distinguishing it it is really nice it's nice to know that like currently it's very obvious to me that this is different from the html spec but i'd also argue that this is also like this ends up becoming a little bit of a problem when it comes to progressive enhancement right like if i'm not mistaken in the history of react it there was a point where you could not just layer it on top of html whereas vue from the very beginning was designed to just be able to drop in like a jquery and then you know if you have server side rendered html that you didn't have to hijack the entire rendering like you didn't have to like uh ingest the entire dom render it to jsx and then spit it back out but rather it says okay this element already exists so let's attach fine grain react like reactivity to it or let's attach some dynamic element to it and this um and and so this is why i think like it's one of those things where i think if we understand where things are coming from and the decisions behind it it becomes less anything about preference and more about like ah like okay that that makes more sense so uh i'm looking at the chat right here yeah so a thesis here saying template syntax is totally fine it's closer to html than jsx well brain i find this way more confusing but also i've never used jsx so that's the funny thing right is that those who are jsx diehard fans would say that like yeah why are you like intermingling like what's clearly going to be javascript into html because you know like the most common confusion i see with this is when people first v-bind for the first time uh when they're new to view and they see these quotation marks right here they basically are like it's not a string because their head immediately jumps to javascript and so for them to having to say well this string is not really a string it's a javascript expression so if i wanted to bind something like what it is it would be more like i'd have to also do the es6 template literal and then like you know drop the variable in there and so again i think if we talk about learning new things like certainly where you come from can influence your preferences and those sort of things but rather than see things rather than like a sort of like a negative or like oh that's ugly and i prefer this like understanding the decisions behind it and more importantly like whether it makes like is those are those trade-offs worth it and to me personally the fact that view especially with like petite views so if you haven't heard of petite view i'm just going to drop a link to y'all for this this this is definitely one of those things that was i think inspired by things like alpine where basically it is only about 5.8 kilobytes size when you when you drop it in and compare that to jquery which i think is like 125 it's kind of bunkers i honestly need to do an entire episode just purely on petite view but the idea with petite view and why it's so small and performant um and also if we think about this i think no i'm actually not gonna make that naughty i might be totally wrong so the thing about petite view is that it's designed to literally layer on top of the html because i believe at one point uh when you do stuff with vue or like a lot of javascript frameworks when you attach it to a node in the dom part of the work that had to be done originally was that you had to like kind of copy the template into like the framework who would then like translate that into the proper like jxx jsx like shadow dom kind of like all like the template trees and all that stuff and then it would update the things accordingly and send it back the thing about petite view which makes it really awesome is that it doesn't even do that it actually just says oh the dom exists already just like go into the dom and do your thing don't even bother with like re-rendering it or rewriting it and that kind of stuff so once again we'll do a whole bit on petite view uh as the name would sort of inform sorry as the name would inform you though petite view is a smaller version of you it's not even just the fact that it's like a smaller bundle size it's that the features it is in a sense a subset of features of view so a lot of things some of the things that you might be looking for in terms of like native transition elements i believe are is an example of this as well as some other things those might not necessarily exist in petite view because again the reason petite view was created and um is because one we know that people do still need to use like things like view without a um an actual build step they might not have the build tools ready because they might still be on a legacy app but that doesn't mean you can't attach fine-grained reactivity to your app and help to slowly progressively enhance it to the point where eventually it might make sense to actually have a build step so for those you know looking at petite view don't don't just like run off with them be like oh we can do everything you can at like 5.8 kilobytes it's not i wouldn't say it's like necessarily future parody but it is a fantastic way to progressively enhance um an app so oh i see here uh subway time here uh jsx would actually make me leave you i love the similarities between twig and itself and it just doesn't fit for me at least and so that's just it right i think subway time you you you bring up an excellent point which is that this here the fact that for example that view doesn't enforce jsx on you i think is one of the again we talked we talked about this um with earlier and i think i'll always repeat this because i don't think people quite understand the power of choice uh when it comes to technology because i feel like a lot of technology oftentimes forces you down a path and so similarly like people might say well vue says you should use single file components and i would to that i would say no you don't have to you can if you want take all this abstract this out to js file and then just import it you could abstract all this to a css file then import it there are plenty of people who do that um you don't have to do it this way in fact you're like oh well it has to have a style block it really doesn't you want to use a global style just delete from your single file component just delete the style block it's not even like it's a requirement it's just how a lot of us use it because we found that it actually really does help our workflow and more importantly because i will say this upwards and downwards and i don't think it'll ever fully pervade out there if you want to use jsx with vue there is a way to do it and honestly i think at this point because i i think that's one of the most misleading comments that's out there it's like well i want to use jsx and vue just only supports templates and no uh you know it's kind of sad that so much technology has like gotten people to think that like there's one way of doing things when it comes to choosing a tool and view is one of the last um to me like i it the fact that it doesn't do that is one of the reasons i continue to support and love the community um and the product for what it does so yeah so if you want to use jsx there is a way to do it and you don't have to use a template if it really does bother you that much okay um that said although i will say the jsx uh comment is contingent on the fact that you have a build tool i don't believe you're able to use jsx in the context of like dropping in a cdm and then just doing it at that point you might as well um you might as well have a build step so ah okay great we're actually at a good break point for this so well brain yes love the question so the question here is what do you think about the pros and cons about swapping the template and script block i tried it for one project and actually prefer it now funny you should ask that uh well-brained well so when i create a new component personally because right now i'm in a template like or like a something that was scaffolded so if i let's say we have mycomponent.view i have my sfc snippet and then when i hit enter you'll notice that for now or not even for now actually i've been doing this for quite some time uh i am i do the script block first and so as like a sort of a sort of discussion on this i think i did a short youtube video on this particular style this might look weird for a lot of people who've used fuel for a little while because the um the cli and most standard snippets will always put the template at top and it was one of an amer amerity core team member uh chris ferrets one of the original um court team members he was the one kind of kind of flipped me onto this idea um in the idea that like if we think about the our work we do with uh view components often times we are interacting between like the script block and the html which is very common but we're actually very rarely interacting with the script tag with the style block so in other words if you think of this another way so if i drop the style block back into here every time we make a change up here we have to scroll all the way down to to get to here um whereas on the other hand so you can you kind of have this redund uh not in redundancy you have this inefficiency as far as call it scrolling paths so that's the reason why if you think about it uh for for like optimum scrolling the template kind of really does belong a little bit more in the middle in this regard for like if you want to optimize like minimize like skipping through things and like jumping around then script template style is technically i would say an arguably a a better scrolling experience of course i'm gonna caveat with this because one for those who are wondering yes absolutely you could just collapse it and then when you're in styling mode you're not worrying about the uh you know your styles this is totally this is a a great way of working around it uh because after all you you get that ability to like now you skip all the h um the javascript you're just worrying about the html css which is great but i thought i'd show you something this little bit i believe it's from the volar extension which i think other things like this will be kind of interesting you'll notice that when i click on it you'll see it does something kind of interesting it takes the same file the app.view and it splits it into the script setup automatically on the sorry not script setup the script block on the left you'll see that the templates on the upper right and the style block is uh down below and so oh i realized i need to stand here i wonder my hand movements are i realized completely lost in this particular window so i will try to keep it here so anyways i would say left side with the script then you have your template and then your style blocked below and what's cool about this this is all one files though it hasn't done anything fancy it just it knows where the the jump points are and so it allows you to just work in those various blocks now i think this is cool and i think it will work for some people for me personally i prefer the single view but this is pretty cool that like you know we can start to think that think about call it almost reconstructing the views of our files a little bit without like having to break from the single uh file component but anyhow um that said all right so anyway so well brain to wrap up my point on that end i also personally prefer script on top than your template than your style but i would say honestly it's based on the preference of the team i think most people probably won't care uh when it comes to like switching out the default and also more importantly some people would just literally search and skip down you know um and i say to each his own and uh choose what work best works best for you all right thesis here with a question why would you want to use jsx in view people come to view to have the rest from jsx uh that is a funny take uh and uh no don't get me wrong i understand you it's a a serious question so jsx has its value in the sense that think of it like um the the where i think jsx is particularly useful when you want to do programmatic uh call programmatic templates so here's the example again i don't have jsx set up on this so i'm we're just gonna like kind of pseudo code this in the event we're creating something called like i'm going to rename this actually just to make it so dynamic heading one of the things i think we all probably encountered inside of our apps is that there are times where an h1 really should be an h2 but should be in h3 kind of depending on the context of it and so what you might do when you're doing that is you probably would say let's just use by the way let's just use a script setup block um just for practice and so i'm gonna import define props from view and so okay so define props and then we'll just say we get a prop called heading level and it is a type of number and then we'll just say the default is one so typically what you would probably do if if you're using pure template is v if heading level equals one and then basically use this and then you would drop like a slot element here and then you would just like again i'm not gonna do too much of it because we don't need to but like this is part of what your kind of your template would end up looking like uh two three something like this and don't get me wrong you probably could then maybe refactor this to be a little bit say maybe like component like you might be able to like hack it around a little bit but if you were using jsx um in that regard this is where i think jsx does have its advantage where imagine if it instead uh i think i think if you're using gsx this becomes irrelevant and again don't quote me on this code but let's say this is a render function and then so we would say the render function returns what it returns a heading with the heading level as the element here and then we would have our slot like this and so this is i would argue cleaner um than sort of the alternative template uh and so a lot of component libraries that um a lot of component libraries that programmatically generate their templates based on like various configurations this is where jsx probably makes a little bit more sense because you're trying to basically figure out how you can make sure all the right things are being generated whereas managing everything in templates in this regard can be a little bit more sluggish um if that makes sense [Laughter] um i see here from well-brained it's like still looks very weird i agree i think for the most part most people will for the most part it would be rare for anyone to really take on a render jsx function and remember it's like i said you kind of have to pick and choose your battles just because because here's the thing right again i'm going to comment this out and as just like again further clarification this is just um pseudo code do not take this as gospel uh okay here so for those like okay when i commented that this here is uh oh wow i totally botched that how do i do this okay great i commented here that this is inefficient and i think the the quotes are very very important here because again if your team understands how it works even though it might be a little bit more verbose honestly it doesn't really matter uh the point the point of like talking about jsx and and making mention of this is that some people would prefer to have like that render one-liner and if that's the case that's great then they can go figure out how to do that but for those of us that are thinking nah i think it i'm honestly fine with like um because you know headings are only six levels and it's fine then do your thing i don't think it's um yeah i don't i i think you should choose what works best for you uh okay so okay i see something i see dragon hey how's it going dragon dust thanks for stopping by let's see coming okay so subway time uh let's switch back a little bit to the context will there be okay this is about the ref sugar so jumping back over because apparently i didn't figure out how to do the compiler yet and i think we'll we'll see how much time if i figure it out the rough sugar here so actually if the red sugar really does work the way it want i wanted to it would look like this and so as a recap the ref sugar says that you do dollar sign ref because it's a globe basically think of it as the idea is if you're using vue and you're using composition api so much that it probably doesn't make sense for you to import ref and things like reactive and computed every single time so why not have basically global methods and this is kind of the idea behind like that dollar symbol right global method in view called ref that you don't have to manually import and then because of this syntactic sugar that we add by using a global variable we can then just call current count current count without doing currentcount.value now subway times question here is will there be a change to the regular composition api so that the whole value situation will be gone for that too or is that just in script setup uh this is a great question so from what i understand subway time because ref would actually be a global method that's actually attached to like view as a whole then this would mean that ref would actually be available to us even in the setup method uh within call it like if you're in options mode you're using the setup method this should still be available to you i can't i can't imagine that it's only within script setup uh but the key i will say this is an rfc so i do think uh yes i don't see why assuming it's a global one i don't see why not that said though uh let me see if i can figure out hold up if i can grab the discussion for you all because uh subway time i think that in case that is has not been brought up yet i met in case it hasn't i want to make sure it doesn't okay here okay so let me bring this over okay so here we have the okay here we have the official take two discussion on the rfcs and then we can see here actually let me bump it up i realize it's gonna be probably a lot smaller for you all because of the stream so yeah the idea is to do refs without value it doesn't say anything here about doing rest without value particularly in the script setup so yeah so it's funny like some users specifically lean towards reactive so they don't have to deal with refs i i would be i would be one of those people so refs and then also with declare reactively derived variables we computed from rest raw ref so let ref zero count compiled output yup ref computed and similarly computed would be nice as well so it would also have a macro so computed and then it would just do count it's just so good i am so excited um if this actually gets at least even in the state that it's in right now that is very exciting so you see function ref zero so okay it doesn't work for nessus go disable by default okay so i will say that the implementation status clearly is only doing it within script setup but there's nothing to be said about uh there's nothing said in the actual proposal that this would be limited to script setup because this is so beneficial honestly that i i would be surprised and i'll try to keep an eye on this in the team conversation but i would be surprised if they limited just script setup uh now it would it be exclusive to the setup method that is probably true in terms of like javascript that's in there but uh yeah because once you're in the options it really doesn't make sense to like do rough reactive that kind of stuff but um funny enough because of subway time's question we have stumbled onto a configuration which means we might be able to play with it so i'm very excited but let me check the chat real quick um before we play with this sometimes the camera lags some like now okay so well okay oh it is lagging i wonder if it's because hold up uh oh that's interesting okay uh is this better this is looking better okay i i have a feeling i think i might know why whoa okay so it's recording but if it's going to slow down my camera on the stream that is a no-no for me hang on a sec camera disabled yeah i just want these two did it work uh okay so i think dscript is recording again nope still lagging how's it going cassidy i think we're okay we're playing around with camera lag i think yes we're good wave wave wave okay i think it's okay but it's making me a little nervous so i'm still seeing it don't think it's a big issue because the audio is still clear [Music] you know it's making me wonder hang on hang on i have an idea i have an idea because we're testing things out we're going to try to make the build with ben show better so i'm going to stop the so okay cassidy even hidden from the chat in the overlay so yeah jacob i believe this is descript because i've actually done it with screenflow and didn't have any issues so let me kick off screen okay so what i'm gonna try to do because honestly the most annoying thing for me uh does it really make sense to do that i don't know okay so what i'm gonna do because quality of the stream for me is more important than figuring this out at the moment is i will where's my screenflow i'm going to take screenflow and then we're going to record okay so now hopefully actually i just realized i need to whoop okay that recorded correctly excellent okay starting the recording again excellent yes well brain you all are more important uh i you know figuring out these workflow things i wanted to test it out but looks like yes okay much better i am much happier with this uh camera speed looks like these scripts has a little bit to do but uh i would say though for those wondering i am trying to do a lot of different things that were at once right like streaming recording transcribing so this is not a knock on d skip in any way uh because d script on its own when you're just uploading video and managing things and honestly for most videos i would say if you're doing things that it probably wouldn't matter but the live stream to me is a higher priority in this regard so that said uh let's see okay so i'll do well brain's question actually real quick before we actually start playing with uh the script setup or sorry the syntactic sugar because that uh who knows what kind of rabbit hole we'll get into with that and so the question here from wellbrain is in regards to script setup and using it together with the setup method and so i would say for so wellbrain when you look at script setup think of script setup as setup method having taken over the entire block so there's no more export default so you don't export anything from this area so you wouldn't be able to do like i'm gonna do the setup up there and then in here i'm gonna have like a setup in here this this would uh it just it wouldn't work that way because at this point you've removed all that boiler plate the moment you do need options api yes you will have to exit the script setup block so at least for your question you would never put the two together just this alone will get you what you need all right so that said let's go ahead and let's try this rough sugar bit because i'm actually really excited about this if we can get this to work so must be explicitly enabled by passing the ref trigger option to the compiler fsc see the appendix for how to do this all right talk to me talk to me where is the appendix ah didn't jump me down pendix uh ref sugar true oh okay here we go enabling macros so vt script ref sugar true okay i can do this i'm confident in my ability to configure this so within view there's an option for the script block and we're going to say that ref sugar is true okay so i'm going to save that that should spin up uh something broke let's just see what happens yarn dev okay that's good take two take two uh oh i just realized i should drop this in the chat my apologies i thought i already did that all right there you go you all have it now um so yes please weigh in on that see what's going on ref sugar take two we're going to uh we don't need that we need this and this and so with that i'm going to make this two-thirds hide the sidebar great dynamic heading can go away and then we can save this here and it still doesn't care for it so to make sure this actually works let me go ahead and just delete this are we good it did reload correctly so if i initialize it with 100 that's okay so that wasn't quite it ref sugar take two [Music] uh i thought i did that right did i not to the compiler option sfc so within veet all right let's let's compare i'm going to move this to the side move this to the side and then we're going into my veetconfig.js export default define config plugins view view takes an object the object has script script then has an object for ref sugar true yup that's it and then webpack view loader okay hmm [Music] all right so here's what i'm gonna do to make sure it's not me we're gonna go ahead and stop it we're gonna go ahead and run yarn again it's already fine yarn dev and then define processing incomplete macro compiler no longer needs to be imported oh interesting okay i will figure that out later but we're saying this won't work broken let's take a look for a few more minutes did i do it right let count equals i mean does it has to be let can i okay if i let current count equals that oh wait i did it plan also figured it out at the same time okay interesting didn't expect that to happen but it is working that is an interesting gotcha uh let's see cons did anyone talk about cons vs let no one mention this no one mentioned the cons uh const okay it is here ref can only be used with lead because it'll be pointless to declare a constant ref ref can also be used to create a variable like binding for other ref types so you can do ref computed equals count or even wrap that okay i understand that um if we think about it from a javascript perspective the whole point of a constant is to say that you're this one value and you're really not supposed to change anymore we all know that this is a little bit odd when it comes to you know sort of arrays objects that kind of stuff because it can be a concept but you can so append properties to it but when it comes to primitive data like strings and numbers and that kind of stuff you're technically not you're yeah you just you just can't like swap it in and out so actually this makes sense i'm actually okay with this i do think it needs to be probably surfaced at a higher level so that people will know that it only is used with let because ref is something that's reactive that is basically the way at least my mental model of thinking about it is this is something that is going to change that's the whole point of making it reactive if it was never going to change it should be static and arguably what's the point of letting javascript do it you should just it should be a static property something that reactive is is going to be changed or altered or modified so let is the only context in which it really makes sense so i'm okay with this now now what i'm excited about also though is let's show something here because oh this is i really really like really really like this because now i don't have to create an entire reactive object to do what i wanted to which is basically escape the um dot value so let's say we want to show double count right so here's the regular account and here let's do double count actually you know what no double count is boring let's do um you know uh squared count that's more fun squared count okay so without the syntactic sugar typically what we'd have to do um and so let's just do it without it for now is so like this so let's say like this and then we want to expose um a something called a square count yeah i'm gonna start i'm gonna start using let actually for rest going forward as like uh just a default anyways so i'm gonna make this one i'm 50 just to show that there's a difference square count 50. so great okay if you wanted to make a computer property typically with uh the standard way of composition api in other words what shift right now we would take in a computed method and what's great about this is that then we can say that square count is not really a ref we really want it to be a computed property and in this computed property we are going to grab the current count and we're going to um actually not even grab it we're going to return current and i just realized i can do this all in one line so i am going to do that because it will be easier to read so this function will return current count uh to the like squared but because we're using the ref right because if i say this right now this won't work you see not a number why because current count is a ref it's not so you need to do dot value and then you'll see haha everything works and so if i click on this and increment you'll see that there's an attached value again not a fan of dot value so in the world of syntactic sugar if this works the way i hope it will so let's let's start to reverse engineer this or like sort of go backwards we would start by getting rid of ref and if we get rid of ref i'm pretty sure it's going to break but let's just do like the logic behind it and save we'll see that it looks like it's actually no oh wait wait current countdown value here that needs to change okay increment oh it's already it already works that's interesting i did not expect that oh oh oh i know why i know what i'm thinking okay for a second i was thinking like i needed to use the macro to unwrap but that's not the case the reason why there's a dedicated macro as discussed here in the ref uh right here for computed is because well just as you you know um a computer property is really to me though as far as my like computer properties save me so much time and mental energy when it comes to calculations because i can trust that as long as there's a single source of truth computer will do exactly what i want every single time which is awesome it's like it's kind of like functional programming right you have a source of truth you know exactly what does what and then when one thing changes things happen perfectly it's great but again not something i really want to import every single time whoops sorry that was my fault then this means that if we put a dollar symbol in front of this and we save it looks oh this is so nice [Laughter] oh man i am a huge fan of this syntactic sugar uh it almost so again let let's just let me let me guess so let's say we're going to do a let of a about ben and let's do a reactive i wonder if this works the way i want it to and then actually let's just do an array real quick uh no fine objects fine and then we can do like or we'll just i i i just realized about ben might all right let's just do like animes we'll do a list of animes and then uh not even the list we'll just do this reactive and then we'll just say like uh current right my hero academia so if i save that oh no it did not like that what broke something broke uh reactive not defined oh okay so i may have assumed something that doesn't exist in the proposal so oh okay so this does mean right with this proposal and honestly it does it does actually kind of make sense there really is no additional value in kind of having the global reactive so basically i see so i don't know this is debatable i would say i'm gonna see if i refresh this works so if i show animes and then show the animates here there you go current my hero academia that works and so what's great about this now is again let's just say we have a button but this is like um add new anime and we just have a string uh here and it'll be a fun oh wait wait i totally botched that it'll be um the name of the anime here and then it'll be uh basically through to oh let's just do two values then uh name let's see um about name whatever and then we can say animes dot animes pass in the about equals the name so if say for example we had a button that has a click and then it clicked it does add new anime that passes in awesome and then do full metal alchemist brotherhood then we save and then i realize the button has no text so add fma then if we click on this yeah that works exactly as i wanted to okay great and so this works because once again this as far as anyone can tell makes sense right animate is an object animes now has an about property then you set the value to it awesome okay this is good now the only thing i'm thinking of though you know as i was like because one of the things um the teams have been discussing is like obviously this is a discussion right now this is not finalized so i guess once again big disclaimer this is an experimental our request for common stage i kind of wonder if it makes sense for there to be a macro um for reactive not because it adds anything additional but i don't know it's a bit arguable that like ref and reactive kind of go together as a pair so like ref is very nice for the primitives but you're not really as far as i can tell you're not you don't typically attach more complex objects to it but you know what what's what is a live stream if not just trying things out if i just did a ref like this would that actually work would that really work it did work welp if that's the case ref at least from what i can tell at least with this syntactic sugar and i i would need to clarify this it does seem to it makes reactive at least from like if you're if you're actually in view territory um so that's be very clear if you're in the build-up of the view territory and you're in like the build tools the reactive helping method almost becomes obsolete because once again i used i and probably a lot of other people used it as a way to get away from the dot value but if ref can take all the different data types and then do all the things we want to as far as like yeah it's a it's a reactive ref then reactive within this particular context is uh it's done however though this does not make reactive as a helper method obsolete i think it needs to be very explicit because we have to remember that the syntactic sugar of view particularly for this uh dollar sign ref is meant to be used within the context of view and with all the build tools that's like the key premise of this what i think is often forgotten about view three is that it can actually be the helper methods and its reactivity engine can be broken off to do a lot of other things and in fact um it was um oscar uh had an amazing talk i think on the view conf 2019 and so if you want to check out the view conf us 2019 that's um there's a there's actually a recording of this i think on the view mastery website let me double check this so conference videos so shout out to oscar for this awesome talk i should be in here here we go this is 20 21 i believe it was was it 20 i think it was 20 20. trying to remember it is 20 it is 20 20. so oscar spencer here i'm gonna drop this in the chat all right [Music] all right so um it's where he basically like he gets the detached view and use it as a back-end framework to do reactivity things which to me is amazing application of how the ingenuity behind a lot of what vue does as far as attaching reactivity and how it can be used are really not uh call it beholden to the specific context of using it within call it web and like that kind of stuff so very very cool uh to see this kind of innovation going on so again mad props to spencer and i'm going to drop this in my notes because i mentioned it and we want to try to get better show notes on for these live streams over time when i eventually get like everything together so that everything can be published and people have records for everything but in the meantime you know for all of you who are here i appreciate you being here live and so hence want to make sure i get those resources to you asap okay so we still have some time left in the stream which because you know we still got a bit to cover when it comes to 3.2 so once again keep those uh questions coming but let us keep on going all right so oh did i lose a 3.2 blog post i think i did here we go all right we're only in the first one i admit partially that is my fault because ref sugar is not part of the original 3.2 uh not ever it's not part of 3.2 at all it's just something that kind of uh was discussed in tandem to the script setup so that that's the reason for that tangent so uh actually also let me let me try to be better about this too we're gonna just commit the code we have here um take status uh oh actually we don't need dynamic heading that's gonna get deleted and then that's good get feature play with script setup and new ref sugar syntax okay so that's been committed and that dynamic heading needs to be destroyed so that's done okay let's talk about the next feature which i am personally very very excited about which is style v bind and so in other words you get component level driven uh css styles that have influence from the javascript but not in the way you're used to right because i think most people right now there's a lot of discussion within the css community um i would say the javascript css community should be a little bit more specific on how to almo like to to always use javascript to do css things in the sense that like you have to write css in the like so for anyone who's done css in a jsx context it looks kind of like this it's like um oh if i remember correctly okay so you would have to attach the styles by going like con styles equals and you do like back ticks uh at least some of them do and then it's more like border radius two pixels comma and it just it looks different i don't know how else to put it um writing css within the javascript context to me is is weird because css is already really great and if anything we should be enhancing on top of it not trying to replace the whole thing so i personally have found that at least for me it when when a system is trying to convince me to write all of my css in javascript it just uh just i got a little bit of an expansion for me so that said i will say this though as always if someone has like if you feel i cuz i'm always curious about that if you feel really strongly or frankly you you think you have a use case where it actually makes more sense for it to be written in javascript over css honestly i'd love to hear from you because um one of my principles you know as i think it's always helped me in my career and i hope you know and help others is just i'm i'm ready to be wrong honestly the last thing i want to be is wrong about something and then stay wrong about it so if there are use cases where it makes more sense for the javascript for it to be written in that sort of javascript like syntax great let me know about it it's a bit like the jsx template discussion right i'm a huge fan of template as a whole but i do see call it proper cases where uh call it the the the jsx render syntax makes more sense um depending on your priorities and so i understand that probably using that analogy css can probably be said the same way where when you want to programmatically generate css you kind of have to do it in javascript but i would argue that is while that is one way to approach solving the problem to me that doesn't make the most sense you'd almost want a way to like have it be css and then layer stuff on top of it so almost like build a separate like that's why pre-compilers and stuff and post compilers exist right it's like to modify the existing one without like to enhance it and augment it rather than almost like replace it i don't know that's my short little rant on css in js so that said we're here to talk about v-bine and v-bind to me is one of those progressive enhancements on css without all the uh sort of craziness so what we're gonna do is though oh no did i not save this stuff i didn't uh oh is it the style block that got removed oh i'm not worried about that okay so git checkout delete okay that's fine all right now that we have that i'm gonna jump over to the hello world actually and we're gonna modify this file so that we have everything defined from there and yep i'm just going to delete it all okay so in this what we're going to do is we're going to play around with this new vbine thing and so in here what we're going to do is we're going to say user and we're going to say user preference and then what i want to do is i'm going to say in here we're going to say color palette and then what i'm going to do here is i'm going to say hang on a sec i'm just gonna that's gonna be it actually let me save did that work uh did i stop the local dev server no i didn't uh user preference here we go okay user preference color palette great let me add a horizontal line to make that obvious here boom boom excellent okay so let's talk about um a common problem i think that we we've kind of run into it's like when we're declaring user preferences for things like color usually what you would do is you would just give users a certain number of colors because otherwise you can either have the inline styles or inherit everything so in this particular case let's say we wanted to tag the background with the user preference so in this particular case we would say background color uh i'm gonna do red just to make it very very obvious that this um this worked okay great that did work so again if i do blue and save and then here we'll see everything is changing um this is really hard on the eyes so we're just going to bring it down to a light gray and kind of interesting it's not detecting the hot module but anyways so this is great but what if we want to let the user choose what makes the most sense to them well typically what you would do how would we approach this we would say well uh user will come in and there will be an input let's call it text we'll do a v model of color preference and then let's again let's practice what we learned we learned about script setup today right so script setup and i already have my rough sugar you know what though i don't want to use rough sugar here because i don't want to confuse people because that is an experimental thing so i'm just going to do uh ref and we'll say const color preference equals ref of an empty string so if i save this here and make sure that it actually prints out we'll show here that in this p tag we have color preference and then save and then here if i type something like you know ffff this is great and so how would we take care of this well uh i just realized we won't be able to hit body actually so actually this already shows a limitation of this particular approach but let's just say for instance the user color let's make this simple for now we're going to bind a uh the style where the color of said um of the text within the h2 this we're going to say we're going to say the color is going to be the color preference and so by default to make sure this actually does something i'm going to make it white so like this so if i save this is great this worked and then if i go ahead and change this now let's do like two two two or where that actually that's not gonna do anything uh what's what's uh 2d yeah see okay so it's starting to work 2d e to the f okay whatever it's working and so this is okay not a bad solution it works especially if you're just changing something like the color might not make the you know this might be fine but what if you wanted to actually have you have like a whole design system you want to make it a reusable class well then your next solution from this point is probably like okay well then my guess is i'm gonna have i'm gonna give them some choices i'm gonna have like blue and this will be color blue and then we're gonna say red color red and then now what we're going to do here is we're going to like we're going to take the class and we're going to make sure that it's bound to the color preference right and so uh i think this should work so if i save and now if i come in here and then i say blue i don't think that did what i wanted to because i'm pretty sure i know why because it's just going to say true and i'm pretty sure this is going to be empty 99 sure oh it does say class blue do i need a refresh uh blue oh there you go blue red oh yeah that did work thank goodness okay so this is working but what's the problem with this well the problem with this is that you're limited by basically however many number calls you can define so don't get me wrong if you were to do this you probably wouldn't even bother with the input text you probably would have some sort of drop down that has like a fix five different color combinations but for the sake of creativity and scalability wouldn't it be nice if you really could give people kind of an infinite choice but without all the in-line stylings and so to me this is one of the problems and that v-bind color will or v-bind will solve uh which we'll see in a little bit so what if instead though we said okay let's forget it forget this we're gonna go ahead and use this thing called a color input from html and in case you didn't know this the color input is mind-boggling good because check it out when i click on the color palette it gives me the color palette clicker so i can choose here i can pick whatever i want and and then here you'll notice it's updating your reactive data exactly as you would expect so to make this a little bit more interesting to be honest i'm gonna wrap all this uh actually i'm just gonna wrap all this here in a div and i just probably should as a class all right we won't worry about that we'll deal with that in a second okay so i'm gonna actually remove this what i'm gonna do with this we're gonna deal with the background color okay so now that we have this check this out so if we go to style and then we just go like a background oh wait i realized we're in a javascript so background color is going to be color preference right so just like this if we save you'll see that as i go ahead and choose different colors it actually updates the background accordingly now this is nice once again for inline styles but what happens when you have something a bit more complex say once again you want the body to update you you could you could do this here no i would not i just wouldn't recommend no okay so let's delete this what if instead we could actually interpolate our javascript into the css block in other words if we did v-bind around our color preference so if i refresh and then we go uh shoot v-buying color i did that right do i have to do scoped no color preference hang on make sure this works is it because it's on body did i bought something yay joys of like live coding there we go okay so this worked i guess the body was uh why did it not like oh i i might know why because it's not within the scope of view which would make sense right because you're actually in your app context you can't attach no that doesn't totally make sense to me let me switch this out again to html and then this makes sense can i do this this work we're gonna try it this didn't change anything so we're gonna take a look hang on a sec count instance rendered message pass yeah i don't care about that we're gonna go back to the wrapper this is good um this is working and so the reason why okay so reason why this is cool though is i realize i'm getting a little distracted because if we could say at the root um i believe that's how you do the css root let me just double check real quick [Music] root oh i did that wrong it's like this and then at the root and then we can say that like background color is equal to or is set to like the vars because i'm of course now i'm forgetting all my css vars subway time oh could it be due to the uh being scoped that is a good question so hang on a second uh var color main black okay so i am right v bind color preference and now without doing all this i'm going to look at uh this should be able to be far background color okay so if this worked as i expected i should have been on the other screen this whole time so here uh extraneous roots does not like it something's funky okay clearly there are i think i'm doing something a little bit weird with this but uh the doo doo doo doo v bind okay so you saw the v bind color preference works here so everything updates let me get rid of the scoped and then we'll see here um again let me take a look at wrapper and then this updates okay so check this out this is what's being generated you'll notice that the element is generating a style tag on it and that style tag basically has a custom css variable reference and so the only thing though that i'm wondering then is from here oh check this out they all inherit this okay so meaning this variable now exists within everything so if we take a look at this this means let me go ahead and take a look at this real quick we bound it java extra options wrap must be wrapped in quotes it's static style yup be buying color use css modules okay so i think this is powerful because basically what you get the chance to do is oh i think i know i think i know uh okay so the reason this is really nice now is that call it uh let's see we're gonna do it like this we're gonna take this out and we're gonna not even bother with the wrapper and what we're gonna do though is we're going to say like the h1 has this particular style binding so then if i go through this now this updates and then if i go through and say i also want the p elements to then also inherit the same background color i get it now [Music] all right so now if i take a look you'll see both of them are now being updated accordingly and the reason this is powerful is because what we end up getting here is you'll notice that you're actually using css variables to define what's happening underneath so if we come in here and look at the dev tools what you'll notice here is that the background color is using the css variable rather than inlining styles and if we think about this this is really like this this to me is the kind of progressive enhancement i'm talking about where we use the javascript to help css out to say hey look we know you want to use css variables because again think about it we have teams of people being paid to optimize the browser rendering engine to do things and there's a reason why all these people spend all this time on all these like uh specs for css and variables and stuff and then engineers will spend the time to implement the most performant aspect of it why would we want to leverage that it seems if you think about it seems rather silly to go i don't care about like you know to just go i'm just gonna do it entirely on my own and figure it out and don't get me wrong that's good for innovation in a lot of ways but like for for a lot of us building sites for people that you know are again the problem are i don't know there's a lot of shared concerns we don't need to be so creative about it i would say the fact that we can leverage javascript to set css variables and then have it go from there i think that's awesome because now this basically does mean that we can go through and just start defining some real interesting stuff so it could be like order 10px uh dashed and then v-bind color preference and so if we save that now and let's take a look at this again we'll see uh i don't see the border showing up why is the border not showing up oh it's that oh the background color is oh it is there ha the background color is just overwriting it so i mean this is because oh because it's interesting right check this out so then if we did it like this you could technically say like oh guys if you had like color detection i don't know what we would do but you could basically say like a computed value we could say computed here and we could say like text color and then i don't know how i would do i can't do this off my math off the head but like call it we could measure darkness and then we would say that uh it's a computed property where basically you know if ref or if color preference dot value you know dot let's call it as a darkness attribute this is totally not how this works it's greater than like 50. then we could like automatically invert text colors and so for now let's just say we know that if then we could probably then oh i wonder if we could use no we do have that we could do hue saturation lightness does the color input let me choose hsl by default uh i'm gonna do this uh hsl a uh hsl can we like is there like a value type color does it have to be hex reacting to color changes i don't care about that yeah internet explorer doesn't support it i'm well aware of this where is you think there would be an attribute to tell you what the value always will be but it looks like it has to be hex so okay but basically think about it like if we had the hsla value you could take the lightness and just say like if it's past a certain point basically return white and the reason this is cool is because then basically we could then bind i don't know in this case well i said text color but um here and so here if we go and take a look you'll see hey check that out uh we have our border and it's creating this kind of fun pixelated design that's kind of neat um oh what's up dave see dave in the chat [Laughter] so uh so as dave point uh points out so it looks like he knows this ap a little bit better than me it looks like the input color doesn't doesn't allow you to return an hsl value which i guess makes sense because if it's only returning a string then it might be a little bit trickier to i don't know i guess format it correctly would have been kind of nice to let you define that but that said okay like there are plenty of libraries that can convert hex colors to hsla fair enough and you would take that and determine it but now you'll see that this is great because if we look at the css being generated it's still exact like we are still using css the difference is um vue is helping us leverage those like the the bindings as far as like user preference now to basically set some variables dynamically on the page while still leveraging the cascade the specificity and like all the beautiful css that we write to create these beautiful design systems it is like a beautiful layer right on top of it oh i see dave in the chat are you excited about this i hope you're excited about this as i am because this to me is like oh it's just like just enough javascript to make uh just make css that much more powerful on the fly uh so um yeah yes jacob saying it's a bit like responsive style mode yeah in a sense uh especially because there are so many times where i think when we're when we're building applications that really certain user preferences will really change the styles and rather than being forced to like manually create classes for every single scenario it is nice to just go okay this is going to be a grid and then the grid will take some css variables and then it'll do its thing it'll be beautiful rather than like i don't know i i've done some really hacky stuff with inline styles to make all that work but with this by merely setting css variables we get all this power and that to me is amazing okay so i realized that we are at time that said let's take a look though i would say because honestly if i was going to cover any two features these are two of my favorite features honestly and you know for those of us using web components there's a new basically defined custom oh i realize this is probably so small for you all um there's a new defined custom element method and so basically for those in web components be sure to check that out and the docs associated with it uh and basically as you can see here there are a ton of performance improvements like i mean check this out the ref implementation thanks to bus von mirrors like 260 faster read 50 right like i love that even though vue 3 was already very performant there is no stoppage from the team when it comes to like we can make this better and so you know if you're looking for things like performance things there are uh basically uh here's like uh where was this from basically i think they did like a performance test across like different frameworks you can see that at least the 3.2 uh beta vue actually gets quite close to vanilla.js in a lot of cases and extremely performing for swapping rows and that kind of thing and again we can see some similar numbers from different other frameworks as well but it's again it's nice to see that in the end while vue is shipping a lot of these sort of developer experience enhancements they don't come at the expense of what we're shipping to users which i think is really key um the other one though actually that i would want to mention that i would say natalia taplahina on the view core team had mentioned in her tweet is that the v memo or memo depending on how you want to pronounce it uh there's a new directive basically that basically the way you think about it is you're telling you that this part of the dom no longer needs to be diff anymore so it is a way basically to squeeze out some performance enhancements in certain scenarios particularly as they say in this case when you're doing like v4 lists maybe certain parts really don't need to be changed and watched anymore so you can kind of be like basically just cache it and then uh take a long line with it uh a long line i don't even know what i'm saying there but basically saying like go go focus on other things don't don't worry about this piece so v dash memo is um a basically a new directive that people should probably be aware of if they're seeing some problems uh again more server rendering things and an effects scope api for more uh disposal timings for reactive effects but basically for the reason why i'm glossing over server-side rendering and effect scope is these are really more lower level apis that really unless you're working with server-side rendering or more importantly if you're a library author and you're dealing with like really nuanced reactivity things i would say this stuff um don't worry about that like kind of put on the back burner so with that said uh yeah i think that's a wrap for today let's switch over to intermission um i really appreciate everybody here taking the time to hang out and all the questions here about you know different about the rough sugar you know 3.2 and that kind of stuff that is awesome and again really appreciate y'all for uh again having those honestly those observations and perspectives because a lot of times i am pretty deep inside of what the team is discussing and we try our best to keep a broader perspective but having you all ask questions like this and give feedback that is very important because vue is you know it's built for the community right there are no we don't have any companies sort of directing why we're building things we're building things so we want to make things easier for people to build awesome applications so the more we can help you do that and as you you know observe things or wonder why something is a certain way ask and you know i'll always do my best to answer it in you know the most honest and transparent way so with that thanks everyone for coming to hang out it's been a lot of fun

Channel: BenCodeZen

Views: 1,076

Keywords:

Id: o1bcXLqyw5A

Length: 86min 3sec (5163 seconds)

Published: Tue Sep 21 2021