- 00:00:00 it's still some time to go until vue
- 00:00:02 version 3 will be out
- 00:00:04 it's currently in beta but we can
- 00:00:06 already have a look at what
- 00:00:07 vue 3 will bring which new features it
- 00:00:09 will add
- 00:00:10 and we'll have a look at one very
- 00:00:12 important feature in this video in great
- 00:00:14 depth which is why this video is a bit
- 00:00:16 longer
- 00:00:16 and that's the new composition api so
- 00:00:19 let's first of all have a look at what
- 00:00:21 exactly viewfree brings what it
- 00:00:23 adds to the view landscape and why we
- 00:00:25 need a new version
- 00:00:26 and then i will show you in great detail
- 00:00:29 what this new api
- 00:00:30 means if it replaces the old one why we
- 00:00:33 use it
- 00:00:34 and how we use it
- 00:00:42 so what will viewfree bring and
- 00:00:45 important
- 00:00:46 viewfree is not out yet at the point of
- 00:00:48 time i'm recording this video but what
- 00:00:50 will it bring once it is out
- 00:00:53 now first of all it's important to
- 00:00:54 understand that view
- 00:00:56 free the framework itself the code base
- 00:00:58 behind the framework
- 00:01:00 will be completely rewritten and that's
- 00:01:02 important though
- 00:01:03 i'm talking about a under the hood
- 00:01:06 change
- 00:01:06 under the hood it's rewritten the code
- 00:01:08 base is rewritten
- 00:01:10 it works differently under the hood it
- 00:01:12 brings us many advantages to which i'll
- 00:01:14 come back
- 00:01:15 but the syntax you use the way you work
- 00:01:18 with
- 00:01:19 vue does not change it stays
- 00:01:22 the same that is really important it's
- 00:01:25 not a complete rewrite
- 00:01:26 as angular 2 was for angular 1
- 00:01:30 it's a under the hood rewrite that keeps
- 00:01:33 the syntax and the usage patterns you're
- 00:01:35 used to
- 00:01:36 now why does this rewrite happen and why
- 00:01:39 do we have a new version
- 00:01:41 well for one this framework is rewritten
- 00:01:43 to take advantage of some new javascript
- 00:01:46 features
- 00:01:46 and some new ideas the team gathered
- 00:01:49 over the years
- 00:01:50 to offer us better performance so due to
- 00:01:53 internal changes and next-gen javascript
- 00:01:56 features being used
- 00:01:57 for example the proxy api vue free
- 00:02:00 works a bit differently under the hood
- 00:02:02 and tends to have
- 00:02:04 way better performance potentially we
- 00:02:06 can get huge performance gains
- 00:02:08 and this is basically a free win because
- 00:02:11 as i mentioned
- 00:02:12 you don't need to change your code for
- 00:02:14 this to happen if you use
- 00:02:15 viewfree you can basically write view
- 00:02:18 applications as you did in the past
- 00:02:20 and you will get this better performance
- 00:02:22 out of the box
- 00:02:25 now better performance is not the only
- 00:02:26 advantage of view free though
- 00:02:29 we also get better typescript support
- 00:02:31 and important
- 00:02:32 typescript stays optional now you could
- 00:02:35 already
- 00:02:36 use typescript with vue 2 apps but their
- 00:02:39 support was limited
- 00:02:40 some things were not really working you
- 00:02:43 didn't get
- 00:02:44 type support everywhere ide support was
- 00:02:47 not that great
- 00:02:48 and since vue free internally uses
- 00:02:50 typescript in its code base now
- 00:02:52 it has way better typescript support
- 00:02:55 so it's still optional you can build
- 00:02:58 view apps with vanilla javascript
- 00:03:01 both with view 2 and view free but with
- 00:03:04 view 3
- 00:03:04 it will be much easier to use typescript
- 00:03:07 if you want to
- 00:03:08 and then there is one huge new feature
- 00:03:11 which actually does mean that the syntax
- 00:03:14 changes
- 00:03:15 but this feature is optional there is a
- 00:03:17 new
- 00:03:18 way of building components you could say
- 00:03:21 or of configuring components
- 00:03:23 you can use the so-called composition
- 00:03:26 api
- 00:03:26 now it's totally optional it's an
- 00:03:28 alternative to the traditional way of
- 00:03:30 building components and in this video i
- 00:03:32 will show you both the traditional way
- 00:03:35 and how it would look like when using
- 00:03:36 the composition api
- 00:03:38 and this api therefore can replace the
- 00:03:41 old syntax but doesn't have to if you
- 00:03:43 don't want to use it
- 00:03:44 you don't have to use it so it's not
- 00:03:46 removing the old syntax it's not
- 00:03:48 changing the old
- 00:03:49 syntax it's purely additive which means
- 00:03:51 it's just an addition
- 00:03:53 so you can use this new syntax for
- 00:03:56 building your components
- 00:03:57 and this syntax will offer some
- 00:04:00 advantages which i'll also show you in
- 00:04:02 this video
- 00:04:02 so with that you have the overview let's
- 00:04:05 now dive in and
- 00:04:06 let's focus on this new composition api
- 00:04:08 because that
- 00:04:09 is the biggest change which potentially
- 00:04:12 can affect
- 00:04:13 everyone now keep in mind it's optional
- 00:04:15 though
- 00:04:16 now the cool thing is we can already
- 00:04:17 play around with this new api
- 00:04:19 at least with the majority of its
- 00:04:21 features in vue 2 applications
- 00:04:24 so below the video you'll find a link to
- 00:04:26 this starting project and this
- 00:04:28 starting project actually uses view
- 00:04:31 version two
- 00:04:32 not view version three because as i
- 00:04:35 mentioned at the point of time i'm
- 00:04:36 recording this
- 00:04:37 and for quite some time still view free
- 00:04:40 is not stable yet it's in beta
- 00:04:42 uh release can be expected in early to
- 00:04:46 mid 2020 i would say for now u2 is the
- 00:04:49 latest version
- 00:04:50 and still we can use this new api but to
- 00:04:52 use it let's first of all
- 00:04:54 understand the old api and understand
- 00:04:56 its limitations
- 00:04:58 so you got a very simple application
- 00:05:00 here and if you run npm
- 00:05:02 install and then npm run serve so
- 00:05:05 effectively executing this
- 00:05:06 serv script here you get a running
- 00:05:08 development server which you should keep
- 00:05:10 up and running
- 00:05:11 and this will host this simple
- 00:05:13 application here which you can open in a
- 00:05:15 new tab
- 00:05:15 under localhost 8080 where for one you
- 00:05:19 have this button to toggle this
- 00:05:20 dummy content here and where you also
- 00:05:23 have these two
- 00:05:24 inputs where you can enter some data to
- 00:05:26 add new
- 00:05:27 items here to a list down there like
- 00:05:30 this
- 00:05:30 and then you can click on these items to
- 00:05:32 also delete them now it's of course not
- 00:05:34 a super fancy app but
- 00:05:36 it will be a great example for the
- 00:05:38 limitations and also for how to use the
- 00:05:40 new composition api
- 00:05:41 if we have a quick look at the project
- 00:05:43 we see that i have three view components
- 00:05:46 here
- 00:05:46 i have the app component the app
- 00:05:48 component renders this div
- 00:05:50 with that button and the toggleable
- 00:05:53 paragraph here and then i render a
- 00:05:55 product form and a products
- 00:05:57 component which are of course these two
- 00:05:59 other components i have here
- 00:06:01 which i import here which i register as
- 00:06:03 local components in the app component
- 00:06:05 and then in the app component i got
- 00:06:07 some data i got an array of products and
- 00:06:10 i got the show user info boolean
- 00:06:12 i got the create product method here in
- 00:06:15 the end which
- 00:06:16 adds a new product to this products
- 00:06:18 array i got the delete product method
- 00:06:20 which deletes a product
- 00:06:21 and i get the toggle user info method
- 00:06:23 now toggle user info
- 00:06:25 simply changes this show user info data
- 00:06:28 property here and toggle user info gets
- 00:06:31 fired when we click this button
- 00:06:34 create product gets fired from inside
- 00:06:36 the product form
- 00:06:37 i pass a pointer to the create product
- 00:06:40 method here
- 00:06:41 to the create to the create product prop
- 00:06:44 in product form
- 00:06:45 and here in products i also have
- 00:06:49 remove as a prop to which i pass a
- 00:06:51 pointer a delete product
- 00:06:52 and this is one way of ensuring that
- 00:06:55 these methods which are defined here in
- 00:06:56 the app component
- 00:06:57 can be called from inside these two
- 00:07:00 child components now let's have a look
- 00:07:02 at these components the products
- 00:07:03 component is relatively straightforward
- 00:07:06 it receives props it receives the items
- 00:07:09 prop
- 00:07:09 which is an array and required and the
- 00:07:12 remove prop which is a function
- 00:07:14 remember i'm passing in a pointer at
- 00:07:16 delete product to remove
- 00:07:18 so which is a function which is also
- 00:07:19 required and then here i have
- 00:07:21 remove product as a method in the
- 00:07:23 products component as well
- 00:07:25 but all i do in there is called this
- 00:07:28 remove prop function we're getting here
- 00:07:30 and this remove product method here at
- 00:07:32 the end gets triggered
- 00:07:33 when we click on well i rendered list
- 00:07:36 item a rendered product
- 00:07:37 and in the template i just output my
- 00:07:40 list of products here
- 00:07:42 with v4 i go through all my uh items
- 00:07:46 items is one prop i got here and this
- 00:07:49 in turn holds the products array we
- 00:07:51 manage the app component
- 00:07:53 and then we also got the title and the
- 00:07:55 price being output here we got some
- 00:07:57 styling at the bottom and that's it
- 00:07:59 and in product form i have a form in my
- 00:08:02 template with two
- 00:08:04 inputs one for the title one for the
- 00:08:05 price got the submit button which is
- 00:08:07 disabled if the inputs are
- 00:08:10 not valid and then here
- 00:08:13 we also have the create product
- 00:08:17 function which is received as a prop we
- 00:08:19 got some data for the title input for
- 00:08:21 the price input and for whether the form
- 00:08:23 has been submitted or not
- 00:08:25 then here got some computed properties
- 00:08:27 one for the price which simply converts
- 00:08:30 the price
- 00:08:30 input which is text to a number and is
- 00:08:33 valid
- 00:08:34 which checks the title and the price
- 00:08:36 input and determines whether they're not
- 00:08:38 empty and hold valid inputs in which
- 00:08:40 case is valid
- 00:08:42 is set true is valid is used here to
- 00:08:44 control the
- 00:08:45 disabled button then i got a watcher
- 00:08:49 here where i basically watch the
- 00:08:51 submitted
- 00:08:52 uh data field here and whenever that
- 00:08:54 changes we run the watcher there i check
- 00:08:56 if it is true
- 00:08:57 in which case i set it to false and i
- 00:08:59 reset the inputs
- 00:09:00 so that basically the form is reset
- 00:09:02 whenever we submit it because submitted
- 00:09:04 will be set to false inside of the save
- 00:09:06 product method which is bound to the
- 00:09:09 form
- 00:09:09 submission here with add submit and
- 00:09:12 there in the end all i do
- 00:09:14 is i prevent the default and i call
- 00:09:17 create product
- 00:09:17 which if you remember is received
- 00:09:20 through props here
- 00:09:21 so i call that function which i receive
- 00:09:23 through props and to that function i
- 00:09:25 pass the entered inputs and thereafter
- 00:09:27 we submit the form
- 00:09:28 which triggers this form resetting logic
- 00:09:32 now if the inputs are empty here
- 00:09:35 you will see i can't press the save
- 00:09:37 button but actually is
- 00:09:38 it is disabled i just don't have a
- 00:09:40 special style for that if we inspect it
- 00:09:42 though we see it's disabled
- 00:09:44 so indeed this is disabled here and
- 00:09:47 only if we have valid inputs here you
- 00:09:50 see it gets
- 00:09:51 enabled and we can add this so this is
- 00:09:54 how this all works and that's a
- 00:09:56 fairly trivial default view app which
- 00:09:59 you also could build in different ways
- 00:10:01 but
- 00:10:01 which also should work relatively fine
- 00:10:05 now which limitations does this have
- 00:10:07 because this is the view syntax we all
- 00:10:09 know and love and
- 00:10:10 it's fairly straightforward so what's
- 00:10:12 wrong with it
- 00:10:13 now there isn't necessarily something
- 00:10:16 wrong with it
- 00:10:16 there just can be problems in bigger
- 00:10:19 view applications
- 00:10:20 if you have a view application with
- 00:10:23 dozens or hundreds of components
- 00:10:26 that components especially bigger
- 00:10:27 components can be hard to reason about
- 00:10:30 and hard to manage here we have small
- 00:10:32 components right these are all
- 00:10:34 very small components with some data
- 00:10:37 with some computed
- 00:10:38 methods with some methods which are
- 00:10:40 triggered upon events
- 00:10:42 and that's it but the bigger and the
- 00:10:44 more complex your application
- 00:10:46 gets the more complex your components
- 00:10:47 can get and the longer they can get
- 00:10:50 and then this traditional way of
- 00:10:52 building components and of configuring
- 00:10:54 them
- 00:10:54 also often called the component options
- 00:10:57 api which i'm using here
- 00:10:59 can reach its limits or can lead to
- 00:11:02 components that are harder to manage
- 00:11:04 also when it comes to code reusage
- 00:11:07 now for example take the app view file
- 00:11:10 there i have in the end two different
- 00:11:12 kinds of data i'm managing
- 00:11:13 the products and show user info now
- 00:11:16 don't get me wrong this is a super small
- 00:11:18 component
- 00:11:18 and this is definitely not a component
- 00:11:20 that's hard to understand
- 00:11:22 but if it were bigger then having
- 00:11:25 different data pieces which are managed
- 00:11:27 independently in a component
- 00:11:29 can be harder to understand why
- 00:11:32 because with the options api we organize
- 00:11:35 our different component features not by
- 00:11:37 feature but by
- 00:11:38 option so we first of all specify which
- 00:11:41 data this component is concerned about
- 00:11:43 products and show user info and then we
- 00:11:46 might have computed and watched and
- 00:11:47 methods like in this case
- 00:11:49 and here again i have methods related to
- 00:11:51 my products
- 00:11:52 and then also a method related to the
- 00:11:54 user info so in the end we have
- 00:11:56 two features going on in this app
- 00:11:58 component you could say
- 00:11:59 products and this user info in this case
- 00:12:02 user info the only data related to that
- 00:12:05 is whether we show it or not but this
- 00:12:06 could be more complex as well
- 00:12:08 it could be more complex user info it
- 00:12:10 could be the logic to fetch it from a
- 00:12:12 server
- 00:12:13 so this easily could be more complex i'm
- 00:12:16 just keeping it simple here
- 00:12:17 so we have a chance of going through
- 00:12:19 this code in a simple tutorial and video
- 00:12:22 so it would be nice or it could be nice
- 00:12:25 in bigger apps if we could split this
- 00:12:27 if the data sits next to the logic next
- 00:12:30 to the functions and methods that
- 00:12:32 work with it and we therefore organize
- 00:12:35 our component configuration by
- 00:12:37 feature and not by option so that we
- 00:12:39 don't say here's the data
- 00:12:41 here are the methods but then we say
- 00:12:43 okay here's everything related to
- 00:12:44 products
- 00:12:45 and then below that here's everything
- 00:12:47 related to show user info
- 00:12:49 that's one thing where you will see in a
- 00:12:51 second that the new composition api can
- 00:12:53 help us
- 00:12:54 it's not the only thing think about
- 00:12:57 reusability
- 00:12:58 now in this app we don't have much which
- 00:13:00 we could want to reuse we have a fairly
- 00:13:03 trivial application here
- 00:13:04 but in the product form here maybe we
- 00:13:07 have some logic which we would love to
- 00:13:10 reuse in other parts of our application
- 00:13:12 as well
- 00:13:13 maybe form related logic which we then
- 00:13:16 write in a more generic way but which we
- 00:13:18 then can use in any form and not just in
- 00:13:20 this form
- 00:13:21 maybe also something as trivial as this
- 00:13:23 toggling logic here
- 00:13:25 in the app component here we're toggling
- 00:13:27 user info
- 00:13:28 but in other parts of the app we might
- 00:13:30 be toggling details about a blog post
- 00:13:33 or details about a product we're listing
- 00:13:36 so code reusage also is something which
- 00:13:39 can be difficult
- 00:13:40 now before we dive into the composition
- 00:13:42 api to see how it solves these problems
- 00:13:45 let me show you how we could make our
- 00:13:46 code more reusable
- 00:13:48 in traditional view so in view 2 syntax
- 00:13:52 only
- 00:13:53 we could work with a mix in let's say we
- 00:13:55 want to make sure
- 00:13:56 that we manage this toggling logic
- 00:14:00 so this data piece here show user info
- 00:14:03 in this method here to change it
- 00:14:05 in a separate mix-in for that we could
- 00:14:08 simply
- 00:14:09 create a new folder maybe named mix-ins
- 00:14:12 and there we have the toggle dot js file
- 00:14:17 and in there we export a constant
- 00:14:22 toggle mix in which holds
- 00:14:25 an object which holds a data function
- 00:14:31 where i return data where i
- 00:14:35 have just a show prop let's say and
- 00:14:38 which also has a methods object where we
- 00:14:41 have the
- 00:14:43 toggle method let's say and in there
- 00:14:47 i simply set this show equal to what
- 00:14:49 this show is currently not
- 00:14:51 so that's in the end just a more generic
- 00:14:53 form of the toggling logic we have in
- 00:14:55 the app component
- 00:14:56 this could allow us to get rid of toggle
- 00:14:58 user info and
- 00:15:00 show user info and we could instead
- 00:15:03 import our mixin object so we import
- 00:15:06 from
- 00:15:08 the mixins folder the toggle mix in
- 00:15:15 and there i named it toggle mix in so
- 00:15:18 let's
- 00:15:20 import toggle mix in here and now in the
- 00:15:22 app component we can add this new
- 00:15:25 mix-ins option here which is an array of
- 00:15:27 mix-ins we want to mix
- 00:15:29 into this component and there i refer to
- 00:15:31 the toggle mix-in
- 00:15:32 this is how mix-ins work in view now
- 00:15:35 what happens is that
- 00:15:36 the data of this component will be
- 00:15:38 merged with the data defined here in the
- 00:15:40 mix in
- 00:15:41 and the methods of this component also
- 00:15:43 will be merged with the methods
- 00:15:44 of this mix in and hence with that if we
- 00:15:47 go back here to the app view component
- 00:15:49 and we now adjust our template to refer
- 00:15:52 just to a
- 00:15:53 toggle method here because i named it
- 00:15:55 toggle in the mix in
- 00:15:57 and then just to show here and also here
- 00:16:02 and we save all of that this rebuilds
- 00:16:06 just fine
- 00:16:06 and our toggle logic still works so we
- 00:16:09 can reuse this toggling logic now
- 00:16:12 problem
- 00:16:12 solved right now not entirely
- 00:16:16 for this simple app it certainly does
- 00:16:18 the trick but one downside with mixins
- 00:16:20 is that inside of the app component we
- 00:16:22 can't easily see what the mixin adds
- 00:16:24 sure we can dive into the code of the
- 00:16:26 mix-in but then we have to remember
- 00:16:28 what's in there when we come back to the
- 00:16:29 component
- 00:16:30 for example that the method is now
- 00:16:32 called toggle and the data property is
- 00:16:34 called show we
- 00:16:36 have to remember that it's defined in
- 00:16:37 the mix in and of course this is not too
- 00:16:39 much to remember
- 00:16:40 but if you work with tons of mix-ins
- 00:16:42 this gets harder
- 00:16:44 also if you have multiple mix-ins you
- 00:16:46 use in one and the same component
- 00:16:47 mix-ins might start to overwrite each
- 00:16:50 other so one mix-in
- 00:16:52 might interfere with functionality added
- 00:16:54 by another mix-in
- 00:16:56 because you're using the same names in
- 00:16:57 different mix-ins this can be a
- 00:16:59 potential issue
- 00:17:00 of course one you can avoid by ensuring
- 00:17:03 that you
- 00:17:04 don't reuse names across mix-ins but it
- 00:17:06 is something which you can
- 00:17:07 forget or overlook and then you
- 00:17:10 introduce a nasty bug
- 00:17:11 so mix-ins are helpful but not the
- 00:17:14 perfect solution
- 00:17:16 so here now we have another example of
- 00:17:18 what's not ideal and now that we know
- 00:17:20 all these things which are not ideal
- 00:17:23 let's finally
- 00:17:24 come to the composition api and see how
- 00:17:26 that works
- 00:17:27 and how it helps us solve these problems
- 00:17:30 so time for the composition api first of
- 00:17:33 all we have to install a package
- 00:17:34 in order to be able to use it in a view
- 00:17:36 to application
- 00:17:38 so quit the development server and run
- 00:17:40 npm install dash dash save
- 00:17:42 add view slash composition
- 00:17:46 dash api this installs this extra
- 00:17:48 package for
- 00:17:49 view 2 important for review 2 which
- 00:17:52 allows you to use this syntax which will
- 00:17:54 be included in view 3 by default
- 00:17:57 in view 2 apps already thereafter you
- 00:18:00 can restart
- 00:18:01 that development server so now we can
- 00:18:02 use this new api in older projects
- 00:18:05 and this is mostly meant to experiment
- 00:18:07 with it you could of course use it in
- 00:18:10 production apps too
- 00:18:11 but there are things which still might
- 00:18:14 change there might still be bugs in
- 00:18:16 there so primarily it's really meant to
- 00:18:18 experiment with it
- 00:18:20 so now with it installed let's convert
- 00:18:22 the app component here
- 00:18:24 actually to a app component which does
- 00:18:26 not use this
- 00:18:27 options api but instead uses this new
- 00:18:30 composition api
- 00:18:32 and for that i'll first of all get rid
- 00:18:33 of mix ins here and
- 00:18:35 bring back my old way of managing show
- 00:18:37 user info just inside of here
- 00:18:40 simply so that we can first translate
- 00:18:42 this all to the new api before i then
- 00:18:43 again show you how to
- 00:18:45 implement code reusage so here i renamed
- 00:18:47 this to toggle user info again and here
- 00:18:50 it's show user info
- 00:18:51 and now let's translate this entire
- 00:18:54 component configuration here to use the
- 00:18:56 new api
- 00:19:01 and we can also get rid of this import
- 00:19:02 here by the way
- 00:19:04 now the new composition api adds a new
- 00:19:08 item we can add to our component object
- 00:19:11 we leave components here that does not
- 00:19:13 change but now we can add a setup
- 00:19:16 method here it has to be named setup and
- 00:19:18 it is available
- 00:19:20 because of that new api we're using
- 00:19:22 because of the composition api
- 00:19:25 so we can add setup to our component
- 00:19:28 objects now
- 00:19:29 now setup is a method and in here we now
- 00:19:32 manage
- 00:19:33 our state so to say our data of this
- 00:19:35 component
- 00:19:36 and we also manage all the functions
- 00:19:39 which
- 00:19:39 should manipulate this now for example
- 00:19:42 here i got two pieces of data
- 00:19:44 i got product and show user info we
- 00:19:47 could add a new
- 00:19:48 constant here
- 00:19:52 products and initialize this to an empty
- 00:19:55 array
- 00:19:58 so i basically converted this property
- 00:20:00 in the data object
- 00:20:01 to a regular constant in javascript and
- 00:20:04 the same for
- 00:20:04 show user info which i'll set to false
- 00:20:07 here
- 00:20:10 next we can add a function a function
- 00:20:14 which allows us to for example create a
- 00:20:16 new product
- 00:20:17 so i'll add a const here and of course
- 00:20:20 we could also use the function keyword
- 00:20:21 to create a function
- 00:20:22 but i'll use cons create product and
- 00:20:24 create an arrow function here but a
- 00:20:26 normal function would work as well
- 00:20:28 an arrow function which receives the
- 00:20:30 title and the price and which then
- 00:20:32 basically does what i did
- 00:20:34 in the create product function down
- 00:20:35 there i create a new product object
- 00:20:38 and now i don't add it to this product
- 00:20:40 but just to products
- 00:20:42 important that this keyword is not
- 00:20:44 available in this setup function
- 00:20:46 because it will run before the component
- 00:20:48 object is fully initialized in the end
- 00:20:50 so this is not available in here or it
- 00:20:53 is available but it will not refer to
- 00:20:55 the view component
- 00:20:56 but we don't need it here either because
- 00:20:58 we just want to interact with this
- 00:21:00 regular
- 00:21:00 constant here with this regular
- 00:21:03 javascript constant
- 00:21:05 now besides create product i'll add a
- 00:21:07 new function here in this
- 00:21:08 setup method and that of course is my
- 00:21:11 delete
- 00:21:11 product function so i'll just copy this
- 00:21:13 here
- 00:21:14 add it here add an exclamation mark here
- 00:21:17 and an
- 00:21:18 arrow here and it's not this product but
- 00:21:20 it's just
- 00:21:22 products and products and now since i
- 00:21:25 plan on changing products
- 00:21:28 i will actually change this from a const
- 00:21:30 to a let because i assign a new value to
- 00:21:32 products here
- 00:21:33 when i overwrite it with a filtered
- 00:21:35 version of this array
- 00:21:37 and last but not least toggle user info
- 00:21:40 this can also be added as a function
- 00:21:42 here
- 00:21:42 so here i have toggle user info add an
- 00:21:45 exclamation mark and an arrow
- 00:21:47 and now it's not this show user info but
- 00:21:49 just show user info
- 00:21:51 and since i changed my value of show
- 00:21:53 user info here
- 00:21:54 i will also change this from a const to
- 00:21:56 a let
- 00:21:59 now we have that here and now we can
- 00:22:01 remove data
- 00:22:02 and methods because they basically have
- 00:22:04 all which i had in there
- 00:22:06 in the setup method now now
- 00:22:09 what's the gain of this and how does
- 00:22:10 this work well it doesn't work yet
- 00:22:13 we're getting started we're making our
- 00:22:14 first steps in the right direction but
- 00:22:16 we're not done yet
- 00:22:18 to make this work we now have to return
- 00:22:21 something here in the setup function an
- 00:22:23 object an object which vue will take
- 00:22:25 into account
- 00:22:27 when it renders this component template
- 00:22:28 when it parses this component template
- 00:22:31 for the first time
- 00:22:32 in this object which we return here we
- 00:22:34 now return
- 00:22:35 everything we want to expose to our
- 00:22:37 template so for example here
- 00:22:40 my products my show user info
- 00:22:45 boolean create product delete
- 00:22:48 product and toggle user info now in case
- 00:22:51 you're wondering about this shortcut
- 00:22:52 this is just a short
- 00:22:53 end for writing basically this all the
- 00:22:56 time
- 00:22:56 if the name of the property is equal to
- 00:22:59 the
- 00:23:00 variable you assign as a value you can
- 00:23:02 omit the colon and the value assignment
- 00:23:04 javascript will expand it automatically
- 00:23:06 so i'm exposing all this data now
- 00:23:09 to the template this is what this return
- 00:23:11 statement does under the hood
- 00:23:13 view will pick it up and now render the
- 00:23:15 template with
- 00:23:16 all this data available so in the
- 00:23:19 template we can now use
- 00:23:21 toggle user info because i'm exposing it
- 00:23:24 here
- 00:23:25 we can use show user info because i'm
- 00:23:28 exposing a key of that name here
- 00:23:30 and the value will be the value stored
- 00:23:32 in the show user info
- 00:23:34 variable and now if we save this you
- 00:23:36 will see we get a bunch of
- 00:23:38 errors here now the reason for this is
- 00:23:40 that view is not yet
- 00:23:41 aware of the fact that we want to use
- 00:23:42 the view composition api
- 00:23:44 in order to make view aware we should go
- 00:23:47 to the main.js file
- 00:23:49 and in there add a new import import
- 00:23:52 view composition api or any name of your
- 00:23:56 choice
- 00:23:57 from add view composition composition
- 00:24:01 api so the package we installed a few
- 00:24:03 seconds ago
- 00:24:04 and then simply run view use and pass in
- 00:24:07 the view composition api like this
- 00:24:09 to add this as a plug-in into your into
- 00:24:12 your view app basically
- 00:24:14 with this this now rebuilds and works
- 00:24:17 but you will see that if you click this
- 00:24:19 button for example nothing updates here
- 00:24:21 the forum will work because there we
- 00:24:23 mostly use the components with the old
- 00:24:25 style
- 00:24:25 but this toggle button does definitely
- 00:24:28 not do the trick
- 00:24:29 the reason for that is that we're
- 00:24:32 technically using this composition api
- 00:24:34 with this setup method and we provide
- 00:24:36 everything to view it needs to render
- 00:24:39 this component
- 00:24:40 or to render the template with the data
- 00:24:42 we return from the setup method but once
- 00:24:44 the setup method is done
- 00:24:46 running view basically has no
- 00:24:47 inclination to render
- 00:24:49 the template a second time after the
- 00:24:52 initial render
- 00:24:53 now in traditional view so without that
- 00:24:56 composition api
- 00:24:57 it for example keeps track of the data
- 00:25:00 you have and whenever that data changes
- 00:25:02 it
- 00:25:02 re-renders dui and the same for computed
- 00:25:05 properties and so on
- 00:25:06 now here the problem we have is that vue
- 00:25:08 does not keep track of products and show
- 00:25:10 user info
- 00:25:11 so when this changes because for example
- 00:25:14 toggle user info is executed
- 00:25:16 which it is well then it will not
- 00:25:19 re-render because
- 00:25:20 vue does not keep track of show user
- 00:25:22 info it does not see that this has a new
- 00:25:24 value and that it should be rendered the
- 00:25:25 template
- 00:25:27 to tell view to do this you have two
- 00:25:28 ways now with the new api
- 00:25:31 we need to import something from that
- 00:25:33 new api so from ad view
- 00:25:35 composition api the first way of
- 00:25:39 defining data
- 00:25:40 on which view should keep an eye is by
- 00:25:42 importing reactive
- 00:25:44 from there with reactive you can
- 00:25:47 basically
- 00:25:49 tell view about an object which
- 00:25:52 properties should be watched you use it
- 00:25:55 by calling reactive as a function and to
- 00:25:57 that you pass an object
- 00:26:00 where you for example have a show
- 00:26:01 property which initially is false
- 00:26:05 and now with this setup here we would
- 00:26:07 set show userinfo
- 00:26:09 dot show equal to what show
- 00:26:11 userinfo.show is currently not
- 00:26:13 and now since we used reactive up here
- 00:26:16 view will keep an
- 00:26:17 eye on that object and on its properties
- 00:26:20 and if one of those properties changes
- 00:26:22 it will re-render so now we just have to
- 00:26:24 adjust our code here and refer to show
- 00:26:26 user info dot show show user info.show
- 00:26:30 and if we now save this after these
- 00:26:32 adjustments
- 00:26:33 this works again and toggling works so
- 00:26:36 reactive is one way of telling you
- 00:26:38 about an object it should watch out for
- 00:26:41 but what if you don't want to use an
- 00:26:42 object here we only need a boolean after
- 00:26:44 all
- 00:26:45 well for that you can use a ref you can
- 00:26:48 import ref
- 00:26:49 from the view composition api and
- 00:26:51 instead of using this approach
- 00:26:53 we can now add a constant show user info
- 00:26:57 and initialize it with ref which takes a
- 00:26:59 default value of false
- 00:27:01 now this in the end creates a tiny
- 00:27:03 wrapper around this value and stores
- 00:27:05 this
- 00:27:06 in show user info and now we can use
- 00:27:08 show userinfo.value
- 00:27:10 the value properties added by view so
- 00:27:13 whatever you initialize with a ref is
- 00:27:15 basically always an object which has a
- 00:27:17 value property
- 00:27:18 and that value property holds the value
- 00:27:20 you use here as an initial value
- 00:27:22 and then i set this to a new value down
- 00:27:24 there
- 00:27:25 in your template you don't have to
- 00:27:26 access that value view will do this
- 00:27:28 automatically for you
- 00:27:30 if it detects that you're working with a
- 00:27:31 ref so here we can then just use
- 00:27:34 show user info like this and you will
- 00:27:36 automatically
- 00:27:37 have a look at the value property and
- 00:27:40 now with ref this is also
- 00:27:42 a property or a value view will keep an
- 00:27:45 eye on and whenever you assign a new
- 00:27:47 value view will update
- 00:27:49 the template
- 00:27:52 and now i just have to get rid of the
- 00:27:54 reactive import
- 00:27:56 to satisfy my linter here and get rid of
- 00:27:58 the error
- 00:27:59 so now with this toggling again works
- 00:28:02 and this is now
- 00:28:03 a very lean way of managing this show
- 00:28:06 user info data
- 00:28:07 as a reactive state now this is now a
- 00:28:10 cons
- 00:28:10 instead of a let because i never assign
- 00:28:12 a new value to show user info
- 00:28:14 i only assign a new value to the value
- 00:28:16 property which as i mentioned
- 00:28:18 view ads automatically and
- 00:28:21 with that we can do the same for
- 00:28:22 products of course we can change
- 00:28:24 products via const and use ref to
- 00:28:27 initialize it to
- 00:28:28 an empty array and then in create
- 00:28:30 product
- 00:28:31 i access products.value and push a new
- 00:28:34 product
- 00:28:37 and down here i set products.value equal
- 00:28:40 to products.value.filter
- 00:28:44 and now with that if we save this
- 00:28:48 you see this works and if i add a book
- 00:28:51 here for 12.99
- 00:28:53 this also works adding and deleting so
- 00:28:56 this is now the composition api in a
- 00:28:58 nutshell but
- 00:28:59 where's the advantage it's a different
- 00:29:01 way but how does it help us with the
- 00:29:03 problems i mentioned earlier
- 00:29:05 well let's first of all consider that we
- 00:29:07 want to have a big component
- 00:29:09 but we want to keep the data we use in a
- 00:29:11 component in one feature of the
- 00:29:13 component
- 00:29:14 close to the logic that changes that
- 00:29:16 data that was one problem we had before
- 00:29:18 well it's easier now we can take the
- 00:29:21 show user info const
- 00:29:23 remove it here and maybe add it here
- 00:29:25 close to the toggle user info
- 00:29:27 function with that i got my products
- 00:29:31 data
- 00:29:31 and all the functions that change
- 00:29:33 products sit directly next to each other
- 00:29:36 and i got my show user info data so
- 00:29:39 directly next to the function that
- 00:29:40 changes it
- 00:29:41 so now we have features sit close to
- 00:29:43 each other
- 00:29:44 reusability is also easier we can create
- 00:29:48 so-called
- 00:29:49 composition functions i'll store them in
- 00:29:51 a folder named comp
- 00:29:52 functions here for example a toggle
- 00:29:56 js file where i simply export a function
- 00:29:59 which by convention should start with
- 00:30:01 use if you worked with react and react
- 00:30:04 hooks this might look familiar to you
- 00:30:05 and the entire api might actually look a
- 00:30:07 bit familiar to you
- 00:30:09 so here i then use use as a starting
- 00:30:12 prefix on my name here and then maybe
- 00:30:14 use toggle
- 00:30:15 and this is now simply a function a
- 00:30:18 function in which we can use
- 00:30:19 features from the composition api
- 00:30:23 we can import ref from add view
- 00:30:26 composition api here for example
- 00:30:28 and manage our toggle state here with
- 00:30:31 ref
- 00:30:32 false and have our function here
- 00:30:35 excuse me our show state and have our
- 00:30:37 function here
- 00:30:38 toggle which will change this state
- 00:30:42 where i basically set show value equal
- 00:30:44 to what show value is not
- 00:30:46 and then here in this use toggle
- 00:30:48 function i return an object
- 00:30:50 which exposes show and toggle so the
- 00:30:53 show
- 00:30:53 constant and the toggle function here
- 00:30:57 and now we can import this since it's a
- 00:30:58 normal javascript function
- 00:31:00 into our app component here we can now
- 00:31:03 import
- 00:31:04 use toggle from
- 00:31:07 comp functions toggle and simply
- 00:31:11 add this here into our setup function so
- 00:31:14 here instead of managing
- 00:31:15 our toggling logic like this we can
- 00:31:18 simply
- 00:31:18 execute use toggle which i'm importing
- 00:31:22 from that toggle.js file in the comp
- 00:31:24 functions folder
- 00:31:26 and use toggle returns an object right
- 00:31:29 it returns an object with the show
- 00:31:32 constant and the value in there
- 00:31:33 which is a ref which is reactive and
- 00:31:35 watched by view
- 00:31:37 and the toggle function so we can use
- 00:31:39 object destructuring here
- 00:31:42 to pull out these values and have our
- 00:31:45 show
- 00:31:46 data piece which we can even rename to
- 00:31:48 show user info with this destructuring
- 00:31:50 syntax
- 00:31:52 and have our toggle function here which
- 00:31:54 we can rename to
- 00:31:56 toggle user info and
- 00:32:00 now with that i'm destructuring what i
- 00:32:03 get back from use
- 00:32:05 toggle and use toggling has my reactive
- 00:32:07 logic
- 00:32:08 i have less logic an app component and i
- 00:32:10 could use use toggle in
- 00:32:12 any other component but unlike in mixins
- 00:32:15 i see what's in there i will get
- 00:32:18 intellisense support i get support in
- 00:32:20 general by my ide here
- 00:32:22 and vue and the compiler can actually
- 00:32:25 also look
- 00:32:26 into this function and warn me at an
- 00:32:29 earlier point of time
- 00:32:30 when i try to use something which is not
- 00:32:32 part of that function
- 00:32:33 and also because it's a regular
- 00:32:35 javascript function i can add multiple
- 00:32:37 such functions from different files into
- 00:32:39 one in the same component
- 00:32:41 and since the logic resides inside of
- 00:32:43 our function and gets not merged with
- 00:32:45 the existing component
- 00:32:46 we also avoid name clashes and so on so
- 00:32:49 all the problems we had with mix-ins
- 00:32:51 they're now gone and therefore since i
- 00:32:54 also renamed this here with this
- 00:32:55 destructuring syntax
- 00:32:57 i have my working component with the
- 00:32:59 logic
- 00:33:00 outsourced into this custom composition
- 00:33:03 function
- 00:33:03 which uses features from the composition
- 00:33:06 api
- 00:33:06 so that solves our mix in problem and
- 00:33:09 it's now a way more elegant way
- 00:33:11 of sharing and reusing logic so this
- 00:33:14 hopefully shows you why this new
- 00:33:16 composition api is
- 00:33:17 interesting it can solve problems you
- 00:33:20 encounter in bigger
- 00:33:21 applications and bigger components
- 00:33:24 that's the main part of the video as a
- 00:33:26 little bonus let's now also translate
- 00:33:28 the product form component to use the
- 00:33:30 new composition api
- 00:33:32 because that might also be interesting
- 00:33:34 since we dare also have computed values
- 00:33:36 and watched values so let's practice
- 00:33:38 working with the
- 00:33:39 composition api here in the product form
- 00:33:42 component it's of course a component
- 00:33:43 built with the traditional
- 00:33:45 options api and therefore let's now see
- 00:33:47 how this would translate
- 00:33:49 to the new api first of all here in the
- 00:33:52 script tags
- 00:33:53 let's import something from the new api
- 00:33:56 from add view
- 00:33:57 composition api because we'll definitely
- 00:33:59 need something from it here
- 00:34:01 in this component we'll definitely need
- 00:34:04 a ref
- 00:34:05 the ref function because we have some
- 00:34:07 data which we want to manage here
- 00:34:11 maybe we also want to have the reactive
- 00:34:13 function to also manage grouped data
- 00:34:16 in an object so let's get started
- 00:34:20 we still define props like this this
- 00:34:22 does not change so we still define what
- 00:34:24 we get in this component like this
- 00:34:26 the composition api doesn't replace
- 00:34:28 everything you had in your old api
- 00:34:31 it mainly replaces data methods computed
- 00:34:33 and watch
- 00:34:35 so we can now get rid of data here and
- 00:34:37 instead add
- 00:34:38 the setup method again now in the setup
- 00:34:42 method here
- 00:34:43 i have my three data pieces here i have
- 00:34:46 my let's say
- 00:34:47 input state which i'll initialize with
- 00:34:50 reactive to which i
- 00:34:51 pass an object which has the title which
- 00:34:54 initially is an empty string
- 00:34:55 and the price which initially is an
- 00:34:57 empty string
- 00:34:59 and then i have this standalone
- 00:35:01 submitted value
- 00:35:03 which will initialize with a ref like
- 00:35:04 this so basically now the data we used
- 00:35:07 is translated to the new syntax
- 00:35:09 in the composition api now with that
- 00:35:12 let's all
- 00:35:13 work on the methods before we have a
- 00:35:15 look at computed and watch there i have
- 00:35:17 to save
- 00:35:17 product method so i'll copy this and
- 00:35:19 comment out the methods
- 00:35:21 object here and add this here now in
- 00:35:24 setup
- 00:35:25 so here i now have save product which is
- 00:35:28 an arrow function which gets an event
- 00:35:30 which i
- 00:35:31 prevent here and now here this won't
- 00:35:34 work i mentioned this before we can't
- 00:35:36 use
- 00:35:36 this here because from inside the setup
- 00:35:38 method you can't access
- 00:35:40 methods in the old api and so on this
- 00:35:43 does not work
- 00:35:44 instead here i now of course want to
- 00:35:46 work with create
- 00:35:48 product which is a prop now since i
- 00:35:50 can't use this to reach out to the
- 00:35:52 component
- 00:35:52 instance i need a different way of
- 00:35:55 working with that prop
- 00:35:56 and thankfully setup receives an
- 00:35:59 argument a parameter if you want
- 00:36:01 it receives the props parameter which
- 00:36:03 gives us access to
- 00:36:04 all the props this component receives so
- 00:36:07 when view
- 00:36:08 executes setup for us it will give us
- 00:36:10 access to all the props this component
- 00:36:12 receives
- 00:36:13 so that inside of setup and of all the
- 00:36:15 functions we define in setup
- 00:36:17 we can work with those props so then
- 00:36:20 here we can simply call
- 00:36:21 props dot create product create product
- 00:36:23 is a prop here and with that i'm calling
- 00:36:25 it
- 00:36:26 well title input that's in the end now
- 00:36:29 input
- 00:36:30 state
- 00:36:33 dot title right and here i
- 00:36:36 got input state state.price
- 00:36:40 at least almost this will not be the
- 00:36:42 final data we forward but
- 00:36:44 good enough for now now for submitted i
- 00:36:47 will now set submitted.value equal to
- 00:36:50 true here so now the method was carried
- 00:36:53 over
- 00:36:54 but what about computed and watched
- 00:36:56 values let's start with watch
- 00:36:58 here i'm watching submitted and when it
- 00:37:00 changes
- 00:37:01 i in the end clear my input well
- 00:37:05 let's comment this out and rewrite it in
- 00:37:06 the composition api
- 00:37:08 there we can import a watch function so
- 00:37:11 we can execute this here now
- 00:37:13 maybe here it's up to you where exactly
- 00:37:15 you do this
- 00:37:17 you can execute watch and watch now
- 00:37:20 takes a function
- 00:37:21 by the way all these functions i'm
- 00:37:23 showing you watch and reactive and so on
- 00:37:26 can be used and configured in different
- 00:37:27 ways and the official api documentation
- 00:37:30 which you of course also find linked
- 00:37:32 below the video is a great place to
- 00:37:34 learn
- 00:37:34 all about the different variations here
- 00:37:36 i show the basic forms
- 00:37:38 so in the basic form watch takes a
- 00:37:40 function and view will
- 00:37:42 automatically kind of look into the
- 00:37:44 function and see
- 00:37:46 with which data you work in there and it
- 00:37:48 will automatically watch the data with
- 00:37:50 which you work
- 00:37:50 so that it knows when to rerun this
- 00:37:53 function you pass to watch
- 00:37:54 so here i'll check submitted dot value
- 00:37:57 and check if this is true and if it is
- 00:37:59 i will set input state dot title
- 00:38:03 to an empty string and input state dot
- 00:38:06 price to an empty string to reset it
- 00:38:08 and then here submitted dot value
- 00:38:11 back to false now by the way
- 00:38:15 in the product form template i'm using
- 00:38:17 two-way binding on title input and price
- 00:38:20 input
- 00:38:21 this will still work with these reactive
- 00:38:23 values
- 00:38:24 of course i have to adjust the names
- 00:38:26 later though but we'll come back to this
- 00:38:29 so for now i'm watching my values here
- 00:38:32 what about computed
- 00:38:34 there i basically want to convert the
- 00:38:36 entered price to a
- 00:38:38 price which is always a number or float
- 00:38:40 specifically
- 00:38:41 and i have this is valid computed value
- 00:38:44 well we also can import a computed
- 00:38:47 function from the composition api from
- 00:38:49 the view package
- 00:38:51 maybe we execute this here
- 00:38:55 and compute it works a bit differently
- 00:38:57 than watch
- 00:38:58 computed will return a value for example
- 00:39:01 the
- 00:39:03 price or the
- 00:39:06 price as number maybe to make it clear
- 00:39:09 what it will be
- 00:39:10 and then compute it also takes a
- 00:39:12 function the difference to watch just is
- 00:39:14 that computed returns a value
- 00:39:16 now what goes into this function well
- 00:39:19 our
- 00:39:20 computed value logic so basically here
- 00:39:23 for price
- 00:39:24 this returned value like
- 00:39:27 this and now this return value will in
- 00:39:29 the end be stored here
- 00:39:30 and just as with watch view will
- 00:39:32 automatically have a look at what you're
- 00:39:34 using in there and watch this value and
- 00:39:36 rerun this function here
- 00:39:38 whenever this value changes now the only
- 00:39:40 important thing here of course is
- 00:39:42 this price input is wrong this of course
- 00:39:45 should be input state dot
- 00:39:48 price now we have another
- 00:39:52 computed value and that is is valid so
- 00:39:54 let's copy all of this
- 00:39:56 and thereafter we can also comment out
- 00:39:57 compute it down there
- 00:39:59 and get rid of it and then here i will
- 00:40:02 add
- 00:40:03 is valid and use computed and pass a
- 00:40:07 function to compute it
- 00:40:11 and in here i have my logic now again
- 00:40:14 it's not this
- 00:40:15 title input dot trim it's it's instead
- 00:40:18 input state dot
- 00:40:19 title dot trim and here i
- 00:40:22 check if price as
- 00:40:25 number which is the value with which i
- 00:40:27 want to work here
- 00:40:28 if that is not a number or if that is
- 00:40:30 smaller or equal than
- 00:40:32 zero and then i'm good and now there's
- 00:40:35 one important step you must never forget
- 00:40:37 this
- 00:40:38 whatever you're doing here in your setup
- 00:40:40 function you in your setup method is
- 00:40:42 nice
- 00:40:42 but in order to be able to use it in the
- 00:40:44 template you need to return it
- 00:40:47 so at the end of setup you need to
- 00:40:48 return what should be available in the
- 00:40:50 template
- 00:40:51 in my case here that's the input state
- 00:40:54 it's also the save
- 00:40:55 product function and the is valid
- 00:40:57 computed property or computed value i
- 00:40:59 should say
- 00:41:01 now the submitted value is not required
- 00:41:04 and price's number is also not required
- 00:41:06 in the template hence we don't need to
- 00:41:08 return it
- 00:41:09 now some adjustments are required on the
- 00:41:12 template
- 00:41:13 there save product has the same name but
- 00:41:15 for title input it's now
- 00:41:18 input state dot title to which i want to
- 00:41:20 bind and here it's
- 00:41:21 input state dot price to which i want to
- 00:41:24 bind
- 00:41:25 the rest is the same and if we now save
- 00:41:27 this it therefore
- 00:41:28 should work now if we go back and we try
- 00:41:30 to use this
- 00:41:33 huh we see this doesn't work the reason
- 00:41:36 for this
- 00:41:36 is that in our code and computed for is
- 00:41:39 valid i'm referring to price's number
- 00:41:41 and price's number is the result of
- 00:41:43 computed
- 00:41:44 it turns out what you get back in such a
- 00:41:46 case is basically a ref so
- 00:41:48 similar to what we got when we used the
- 00:41:50 ref function here
- 00:41:51 in the app component and remember that
- 00:41:53 what we get back here is an
- 00:41:55 object which always has a value property
- 00:41:57 so in the end the computed value is
- 00:41:59 hidden
- 00:42:00 under a value property in an object
- 00:42:02 which is returned by computed
- 00:42:04 so here we should check for
- 00:42:07 pricesnumber.value and
- 00:42:09 pricesnumber.value like this
- 00:42:14 if we do this and we save this now we
- 00:42:17 can add a book for
- 00:42:18 12.99 and at least this works but now we
- 00:42:22 get a different error
- 00:42:23 the price to fixed is not a function
- 00:42:27 well that simply stems from the fact
- 00:42:29 that in my save
- 00:42:30 product function here in the product
- 00:42:32 form i'm forwarding input state dot
- 00:42:34 price to my component which gave me that
- 00:42:37 create product prop so to the app
- 00:42:39 component and
- 00:42:40 that now is a string however because
- 00:42:43 input state.price is a string that never
- 00:42:45 changed
- 00:42:46 i of course want to forward my price as
- 00:42:48 number
- 00:42:49 so down there it's price as number dot
- 00:42:52 value which i want to forward
- 00:42:54 next to input state dot title and with
- 00:42:58 this now after reloading this one more
- 00:43:00 time
- 00:43:01 if we now create a book here
- 00:43:04 you see this works and if i add a carpet
- 00:43:07 for 129.99 this all the works and i can
- 00:43:10 delete
- 00:43:11 this as well and now everything has been
- 00:43:14 translated to the composition api
- 00:43:16 now i know that this is a lot of new
- 00:43:18 stuff and
- 00:43:19 on first side it looks like a lot of
- 00:43:22 overhead to learn a lot of new things to
- 00:43:24 learn
- 00:43:25 without a great reason to do so right
- 00:43:28 now if you never had view apps where you
- 00:43:31 found that the existing api
- 00:43:33 caused problems there is no need to
- 00:43:35 switch
- 00:43:36 but if you worked on bigger projects and
- 00:43:38 bigger components
- 00:43:40 this new api might working on those
- 00:43:43 projects easier because it's easier as i
- 00:43:45 showed
- 00:43:46 to organize data and logic next to each
- 00:43:49 other and
- 00:43:49 to share and reuse logic therefore this
- 00:43:52 new api is a great addition
- 00:43:54 but of course not a must use thing if
- 00:43:57 you prefer the old api which will be
- 00:43:59 fully supported in view free
- 00:44:01 nonetheless i would recommend that you
- 00:44:03 also dive into this new api and i showed
- 00:44:05 some of the most important building
- 00:44:07 blocks here
- 00:44:08 of course there are some things to
- 00:44:10 memorize reactive and ref
- 00:44:12 for managing reactive data that compute
- 00:44:15 it returns an object with a value
- 00:44:17 property
- 00:44:18 things like this but i showed them all
- 00:44:20 in this video and in addition below the
- 00:44:22 video
- 00:44:23 i mentioned before i attached some links
- 00:44:25 which you can dive into
- 00:44:27 to have a look at the official
- 00:44:28 documentation so to say for this new api
- 00:44:32 learn about the reasons the view team
- 00:44:33 mentions there and also see the
- 00:44:36 full syntax and all the configuration
- 00:44:38 options you have available
- 00:44:40 with that i hope that this video was
- 00:44:42 helpful and at least got you started
- 00:44:44 with the new api
- 00:44:46 and could show a bit why it might be
- 00:44:48 interesting for some
- 00:44:49 applications the core takeaway of course
- 00:44:52 as i mentioned at the beginning already
- 00:44:54 is that viewfree adds this new optional
- 00:44:56 api
- 00:44:57 brings us better performance no matter
- 00:44:59 which api we use
- 00:45:00 and in general will probably be a great
- 00:45:03 new version of
