Vue JS 3: Composition API vs Options API - Same App in Both!

in this video i'm going to show you how to use vue.js 3 to create the same simple to do app using both the options api and using the composition api as well if you're new here my name's danny i'm an indie app developer and creator of budget if you want to learn about vue.js web development and app development and all that good stuff please consider subscribing every subscription helps me to create more content for this channel so what we're going to do here is create this very simple to-do app where we can add to-do's and we can delete to-do's and we have a computed property telling us how many to-do's we have i'm going to create this first of all using the good old options api by using data methods computed properties and watches and then we're going to recreate the same app on this page using the composition api instead by using the new setup method and all of the composition apis equivalence for data methods computer properties and watches let's get started by creating a new view 3 project using the view cli so i'm just going to google view cli jump to the view cli page get started installation and if you don't have node installed then you'll need to have that installed which you can get to at nodejs.org probably want to install the one on the left once that's installed you can then install the vue cli with this command and you should then be ready to create a new project so i'm going to jump to creating a new project and we just need to run view create and then the name of our project so i'm going to jump to my terminal which is just running within vs code which is the editor i'm using and you want to make sure you're in the folder where you store your projects and then i'm going to run view create uh let's call it view dash options dash vs dash composition i'm going to choose manually select features i'm going to enable the router and disable the linter so i don't get loads of annoying messages and then i'm just going to hit enter and then i'm going to choose view three i'm going to choose node to history mode i'm going to choose in dedicated config files then i'm gonna choose no to save this as a preset okay it's finished creating the project so now we just need to run npm run serve in the folder it's created so i'm gonna drag the folder it's created into vs code then i'll open up the terminal and just run npm run serve okay that's now running so i'm just going to command and click on this link to open up our project let's start by setting up a page for the options api and a page for the composition api so i'm going to jump to source and views and these are the pages currently being used home and about so i'm going to rename the home component to options dot view and i'll rename the about component to composition dot view and i'll jump to the router file router index.js and i'm going to replace home here and here and here and here with options and then in this second route i'm going to change the path to slash composition change the name to composition and update the path here to composition dot view i'll save that and we also need to update these links in the nav bar so i'm going to jump to app.view change the text in this first link to options api and change the text in the second link to composition api and we need to change the path here as well to slash composition save that let's see if that's working yep seems to be working okay let's create a nice simple to-do app on this options page using the options api first so i'm going to go to views and options dot view i'm going to remove this hello world component which is adding all this text and stuff i'm gonna remove this import and remove this components object as well and i'll save that and we now just have this view logo so i'm gonna stick a h3 on the page which just says you have xxx to do's uh later on we'll replace this xxx with the number of to do's using a computed property and then underneath that i'm gonna add a div with an input inside it i'm gonna split the attributes on that using the split html attributes extension in vs code and i'll add a placeholder to this which just says add a to do save that and then underneath this div i'll add another div where we can display our to-do's so i'll add an unordered list and an li and within that i'm gonna add a span with the name of our task just put one in there now i'm gonna add a button with an x which we can use to delete it and i'll just duplicate this li a couple of times change this one to two and then this one to three i'll save that and this is not the prettiest so let's add a little bit of style so a lot of style block uh let's style this ul i'll set the list style to none to get rid of these bullets and i'll set the padding to zero to get rid of the space on the left i'll set the width to let's say 200 pixels i'll use margin to put it in the middle so i'll set the margin to zero on the y-axis and then auto on the x-axis let's add a bit of margin to the top so i'll set the top margin to 20 pixels and the bottom margin to zero then i'm going to style the lis the list items so i'll give each one of those a border so border one pixel solid save that and i'll set the display to flex and i'll add a bottom margin to each one so margin bottom set that to 10 pixels and to push this button over to the right i'm going to style this span inside the li so li span and i'll make that grow by setting flex grow to 1 save that and this is looking decent enough now okay let's set up an array to store our to-do's i'm going to get rid of this name property don't really need that a lot of data method that returns an object uh we'll create an array called to-do's and each one of these will be an object with an id property i'll set this one to one and then a name property i'll just set this one to one like that and i'll duplicate this a couple of times update the ids to two and three and i'll update the names as well i'll save that and we want to spit these to-do's out on the page so i'll jump up to these lis i'll get rid of all except the first one i'll add a v4 directive to this now we want to iterate through this to-do's array so i'll use to do as the placeholder so v4 to do in to-do's and we also need key property and i'll set that to this id so to do dot id to do dot id save that and we see three to-do's but they all say one so we need to replace this one text with double curly braces and then the name property so to do dot name save that okay let's add the ability to add a to-do here so first of all we need to bind this input to a data property so i'll add a new data property and we'll call it new to do name set it to an empty string and then we'll bind this property to this input by using a v model so i'll add v model set that to new to do name save that and to check that's working let's just put something in this string here and we see it in there so that's hooked up all right okay so i want to add it to do when the user hits enter when they're in this field so i'm going to jump to the input and add an event handler here and we'll add a key up event handler and we'll add the dot enter modifier so this will be fired whenever the user hits enter when they're in this field and we'll trigger a method called add to do and we need to create that method so i'll add a methods object i'll add this add to do method just make sure that's working i'll just log out add to do jump to the console and if we hit enter when we're in this field yep that's firing so all we want to do here is set up an object like this and push it to this to-do's array so i'll set up a new to-do object let's call it new to do set that equal to an object with an id field and to get a roughly random id we can just use date dot now and the name property we're going to grab that from this new to do name property so we can just set this to this dot new to do name then we just want to push this to do to this to do's array so we can just do this dot to do's dot push new to do so i'll save that see if that's working type something in here and hit enter yeah that's working but it's not clear in this field here so let's also clear the field by setting this new to do name property which is bound to that input back to an empty string so we can just do this dot new to do name equals empty string save that and that's now working okay let's add the ability to delete a to-do when we click on this button here so i'll jump to that button which is here and we'll add a click handler so at click and we'll trigger a method called delete to do and we'll pass in the index of the current to do so the position of the to-do in the array and to get access to the index we need to place our placeholder here into parentheses and pass in the index as a second parameter so let's create this delete to do method delete to do pass in the index and i'll just log out the index for now make sure that's working so we click on one of these buttons here we see zero then for the second one we see one okay so to remove the index from the array we can just use the splice method so we can just do this dot to do's dot splice and we want to remove the item which is at the position of index which we're passing in so i'll put index here then we just want to add comma and one to make sure we only remove one item so i'll save that see if that's working yeah that seems to be working okay let's use a computer property to spit out the number of to-do's here and we could just spit out the length of the to-do's array like this to do's dot length which works but i want to use a computer property because i want to demonstrate using computed properties in the composition api later on so instead of doing that i'm going to set up a computed property so i'll do that after the data method so computed and we'll call this to do's count we just want to return something what we want to return is the length of this array so i'm just going to return this.length save that and i'll replace this here with our computer property name to do's count save that let's make sure that's working so we see three and if we delete stuff it says two if we add one it says three again so i also want to demonstrate using watches in the composition api later on so let's add a watcher which stops people from swearing in this field so i'm going to jump to our data i'll add an array here called swear words uh we'll just put some swear words in there so far let's add butt hair amlad willy okay so let's add a watcher which will watch the value in this input by watching this new to do name property so down at the bottom here i'll add watch object and we want to watch the new to do name property this method will return the new value every time it's changed so for now i'll just log out new value save that so if i type something in here we can see the latest value always being logged out so now we want to check whether what the user has typed matches matches any of our swear words so childish right so what we can do is we can do if this dot swear words dot includes which will check if any of the items in this array include something and then into that we can just pass new value and we probably want to convert that to lowercase so i'll use the two lowercase method and if this is the case then we want to stop them because they're bad people so what we could do is set this dot new to do name so this property that's bound to the input back to an empty string to clear it out again then we could fire an alert which says you must never say and then we'll output the new value now we'll just add a couple of exclamation marks at the end so we'll save that so if we type in most strings we don't have a problem but if we type in butt hair we see an alert you must never say butt hair and the field is now cleared okay this app is pretty much finished now so let's recreate the same app using the composition api so i'm just going to copy everything that's on options.view and i'm going to jump to composition.view in the views folder i'm just going to paste over this i'll save that jump to the composition api page and we can see our app here um we're not going to be changing the template here this is an important thing to note about the composition api everything in the template stays the same so we still use the same directives like v4 v model and we use event handlers in the same way and we still output data and computed properties in the same way so we don't need to change anything here it's only the way we set up our data methods computed properties watches and a few other things that we do differently with the composition api so with the composition api we don't have a data method a computed object methods object a watch object so i'm just going to comment all of this out and what we do instead is we use a setup method so i'm going to add a setup method like this and we're going to set up all of our data methods computer properties and our watcher within this method let's set up some variables for our data so our new to do name property our to-do's array and our swear words array so with the composition api we just do this with variables and if we want our variable to be reactive then we need to either use the ref method for simple variables like strings booleans arrays or we need to use a reactive object for objects that we want to be reactive and for now we're just going to use refs but we will cover reactive objects later on so let's set up a ref for our new to do name variable which our input is looking for here so all we need to do is set up a variable like usual so the name needs to be new to do name and we want to set that equal to the ref method and we need to import this ref method from view so let's import ref from view and we can now use this method and we just put our initial value inside this method so this needs to be an empty string so our new to do name ref is now set up however this won't work just yet because every variable or method that we use that we want to be available in our template we need to return that at the end of this setup method so we just add a return at the end of this setup method and we can just pass in new to-do name like that so let's save that and see if it's hooked up okay so if we set this value to something and save it we can now see it in this input because this input already has a v model on it which is looking for a variable called new to do name which we've just set up here so i'll just set that back to an empty string and save that okay let's set up another ref for our to-do's which this v4 loop is looking for so again we just do let to do's trigger the ref method and pass the initial value in here and this is going to be an array because our template is already hooked up to this to-do's variable in this v4 loop we should be able to pass some to-do's into this array and see them on the page so i'll just copy these to-do's from the options api code and paste that into this array and just remove the comments and i'll save that and we're not seeing them because we also need to return this to-do's variable at the end here so i'll add to-do's here save that and we can now see some to-do's on the page and i'll just set this array back to an empty array for now and we also need a variable for our swear words array however this doesn't need to be reactive because we're not using this array anywhere in our template and we're not going to be making any changes to this array so this can just be a normal variable or constant in fact let's make it a constant because it's not going to change so i'll just do const swear words equals and then i'll just copy the array from down here and paste that there because this is not a reactive property or variable we don't need to return it at the end here so we don't need to add it here oh that should be swear words so i'll save that so let's set up some methods for adding a to-do and deleting it to do and before we do that i'm just going to comment out this h3 just to get rid of some warnings in the console so how do we set up methods using the composition api well we just use standard javascript functions and then we just add them to our return statement at the end of the setup method but only if they're being used by the template which both of our methods are we're triggering the add to do method here and we're triggering the delete to do method here when we click the button so when we hit enter when we're in this field this event listener is trying to fire a method called add to do so let's create that method so i'll create that here so function add to do and i'll just log out add to do for now and we also need to add that to our return statement at the bottom so add to do uh i'll save that and because this input already has this key up dot enter handler which is looking for an ad to do method then this should hopefully already be working so if we hit enter yep we see add to do being logged out so now let's copy the functionality from the original method which is here paste it into this new method uh remove the comments okay so we're setting up a new to-do object here with an id and a name property and we want to grab the name from this new to do name ref which is attached to this input so we don't want to use this dot new to do name here that's not going to work we just want to grab the value from this variable here so i'll replace this with new to do name however this is not going to work just yet because when we set up a ref like this it actually creates an object and within that object is a value property and that's where it stores our value so we need to change this here to new to do name dot value i'll save that so we've set up our new to-do object and we then want to push it to this to-dos array so again we don't want to use this dot to do's we just want to push it into this array here and again the value of this ref is going to be at to do's dot value not just to do's so we need to change this to to do's dot value dot push and we then push this object there and this line at the bottom was just setting the new to do name property back to an empty string to clear out this input so again we want to set the value of this ref back to an empty string so we need to change this to new to do name dot value so i'll save that and hopefully this should be working now so i'll try and add a task uh yeah seems to be working okay let's set up a method for deleting a to-do again so when we click this delete button here which is here we have a click handler and it's trying to fire a method called delete to do and it's passing in the index of the current to do within the array so let's create a method called delete to do and receive that index so i'll add that here so function delete to do and we want to pass in that index and i'll just log out the index for now and we also need to add this function to our return statement so i'll add that here delete to do and save that uh let's see if that's working click on a delete button see index zero click on the next one index one so what do we want to do here we just want to remove the item from this to-do's ref which is at the index which we're passing in here so again our array is not going to be at to-do's it's going to be at to-do's dot value so we want to do to-do's dot value dot splice pass in the index because we're going to delete the item which is at the position of the index that we're passing in then we just want to add one so that it only removes one item so we'll save that let's see if that's working i'll add some tasks and click some delete buttons and yeah that seems to be working now if you found this video useful so far please consider smashing the like button and leave a comment tell me what you think about the composition api okay let's get our computed property working now so i'm going to uncomment this h3 where we were previously spitting out a computer property called to do's count which just simply counted the to-dos array so how do we create computed properties with the composition api well we need to use the computed method and we need to import this method so i'll add that here to our import and we want to set up a computed property called to do's count so let's set that up after our variables here and so we just want to set up a variable with whatever the name is that we want to use we want to use this to do is count name so i'll do let to do's count and we set that equal to a computed method like this and then inside here we can just return something just like we did with options api computed properties so what do we want to return well we want to return the length of our to-do's array so we can just do return to do's and remember our array is actually at to do's dot value so we need to return to do's dot value dot length so i'll save that and we should hopefully see our to-do's count here and we're not because again we need to return this computer property so i'll add that to our return here and i'll just split this up a bit into variables computed properties and methods so we'll save that and we can now see you have zero to do's and if we add some we can see that it updates let's add our watcher back in which stops people from entering swear words because currently we can enter far and that's just not acceptable so how do we set up watches using the composition api well it's fairly similar to computed we need to use the new watch method and we need to import that method from view so i'll add that up here watch and we'll place our watcher down here after the functions so what we want to do is fire the watch method and for the first parameter we just pass in the name of the variable that we want to watch and we want to watch this new to do name variable so i'll pass that in here new to do name for the second parameter we just have a callback and this will give us access to the new value if we pass a variable name in here such as new value so i'll just log out new value for now save that and hopefully if we change the value of this input we should see the new value being logged out and yeah that seems to be working so now i'm just going to copy the code from our original watcher which is here just copy the stuff that's inside the method i'll paste it into this watcher remove the comments and i'll remove the console log as well so in this if statement here we want to check if this swear words array contains an item which is equal to whatever the user has typed in here so whatever's in the value of this new to do name ref so we don't need to use this here we can just use swear words and we don't need to use swear words dot value because this swear word's constant just a normal constant it's not a ref constant we're not firing the ref method on it it's just a normal constant so we can just do if swear words dot includes and we're passing in the new value here so this bit should work and if that's the case then we want to set the value of new to do name back to an empty string so instead of this dot new to do name we want to do new to do name dot value equals empty string uh we don't need to change this alert so hopefully that should work now so i'll save that and we can type in most strings no problem if we type in willy then it stops us you must never say willy so we've already recreated this app now using the composition api instead of the options api but there's one more thing that i wanted to cover which is reactive objects so right now we're using refs to manage our reactive data but there is an alternative to using refs with the composition api which is a bit more similar to using the data object in the options api and that's by using reactive objects so let's move our reactive data so our new to-do name variable and our to-do's variable into a reactive object so to do this we do need to import the reactive method from view and we can now set up a reactive object so i'll do that after these two refs so to do that we just want to fire the reactive method and pass in an object like this and then we want to assign this to something so i'll assign it to a variable called data although you can use any name you want and we also need to add this to our return statement so i'll add that down here as well data and now any properties we add to this object will be reactive and one of the cool things about using a reactive object instead of refs is that we don't need to do this dot value thing which you'll see soon so let's set up some properties for our new to-do name and our to-do's in this reactive object so a lot of property called new to do name i'll just set that to an empty string and then i'll add a property called to-do's and set that to an empty array and i'll save that and now let's update our template to use the data that's in this reactive object instead of these refs so i'll jump up to the template and this v model we now want to change this to data dot new to do name so i'll change this here to data dot new to do name and our to-do's array here we now want to use the to-do's array which is our data dot to-do's so i'll change this to data dot to do's save that uh just to make sure this is hooked up okay let's just put something in this data dot new to do name property save that and we see it in the input so that's hooked up okay uh let's just quickly add some to do's to this array to see if we see them on the page so i'll copy these to-do's from the old code and paste them inside this array remove the comments save that and we can see the to-do's on the page and i'll just set this back to an empty array so now we need to update our methods to use this reactive object instead of these refs so i'll jump down to add to do so when we set up the new to do object we want to set the id to the date which is fine then we want to set the name to the property data dot new to do name so i'll change this here to data dot new to do name and notice that we don't need to use dot value here all we need to use is the property name within the object and we don't want to push this new to-do object to to dos.value anymore we want to push it to data.todos so i'll change this to data.todos.push to clear the new to do name property we now want to set data dot new to do name to an empty string so i'll change this bit to data dot new to do name set that to an empty string so i'll save that let's see if we can add a to do yeah that's working so let's update our delete to do method so we no longer want to remove the item from to-do's.value we want to remove it from data dot to do's so i'll remove to do stock value change that to data dot to do's dot splice save that and let's see if that's working i'll add some to-do's uh yeah the delete method is working now however our computed property is not working this always says zero now so let's update our computer property to use this reactive object instead so instead of returning to dues.value.length we want to return data.todos.length so i'll change this to data.to do's and save that uh let's see if that's working so if we had some to-do's yeah we can see the count is being updated there however our watcher is no longer working we can still type in far no problem so let's update our watcher to use the reactive object instead of these refs now we can't watch a nested object property like this data dot new to do name that's not going to work so what we're going to do is watch the whole data object and i'll just log out new value here so we can see what's going on save that so if we type something in here we have an error there so just get rid of this if statement for now so we just have the console log i'll reload that so if we type something in here we can see new value being logged out but it's logging out the value of the whole of this data object so i'll open up that open up this target and we can see our new to-do name property in here so we want to check if this value here is contained within our swear words array so i'll just uncomment this if statement so we're checking if the swear words array includes something but now we want to check if new value dot new to do name is contained in that array so i'll just change this new value here to new value dot new to do name i'll save that and if that's the case then we want to clear the field but we don't want to set new to do name dot value to an empty string we want to set data dot new to do name to an empty string so i'll change this to data dot new to do name set that to an empty string instead and in this alert we don't want to just spit out new value because remember that's going to be equal to this proxy object so what we want to split up there is the same as we did here new value dot new to do name so i'll copy that paste that here i'll save that let's see if our watcher is working so i'll type in dot here and yeah it's working except we're not seeing the value in this alert and i think that's because we're actually clearing the value of data dot new to do name here so i'll just switch these lines around and see if that works type in butt hair and it's now working you must never say butt hair and we're not using our refs anymore these refs that we set up here so i'll just comment these out and remove the ref method from the import and i'll also remove these refs from our return statement as well so new to do name and to-do's get rid of those save that let's just make sure everything is working i'll just remove this console.log save that reload so we can add to-do's we see our computed property and we can delete to-do's and we can no longer type in butt hair if you've enjoyed this video please check out one of my other vjs videos above and if you want to see more content from me more frequently then please consider clicking my face over there and clicking subscribe because the more subscribers i get the more content i can create thanks for watching and i'll see you in the next one

Channel: Make Apps with Danny

Views: 8,507

Keywords: beginner, composition api tutorial, composition api, compositionapi, computed, free course, intro to composition api, intro to vue 3, intro to vue, javascript, learn javascript, learn vue 3, learn vue, programming, reactive, ref, tech, todo app, todo, vue 3 composition api, vue 3 course, vue 3 tutorial, vue 3, vue composition api tutorial, vue composition api, vue js 3.0 tutorial, vue.js 3 tutorial, vue.js 3, vue.js, vue, vue3, vuejs 3, vuejs, vuejs3

Id: mZFuR3-oNXQ

Length: 35min 43sec (2143 seconds)

Published: Wed Jan 13 2021