Coding

COMPUTED PROPERTIES | VueJS | Learning the Basics

  • 00:00:01 welcome to this video on view chairs
  • 00:00:03 great to have you here because the view
  • 00:00:05 chairs is awesome now in this video I
  • 00:00:08 want to have a look at a little bit more
  • 00:00:09 advanced concept computer properties I
  • 00:00:12 assume you are familiar with the very
  • 00:00:14 very basics of view chairs if not I do
  • 00:00:17 have videos on those two on this channel
  • 00:00:19 also you might want to check out the
  • 00:00:21 video description there you will find
  • 00:00:23 further resources including a very very
  • 00:00:26 very comprehensive full course on beauty
  • 00:00:29 as I created with that let's dive into
  • 00:00:32 computer properties and see what they
  • 00:00:34 are and how they work I get this example
  • 00:00:37 application a very simple one I get a
  • 00:00:40 button where I listen to a click and
  • 00:00:42 execute the increment method down there
  • 00:00:44 and in this method I simply add two to
  • 00:00:47 accounter property and one to a clicks
  • 00:00:50 property which is store in my data
  • 00:00:52 object with counters and clicks set up
  • 00:00:55 here I then simply output them in the
  • 00:00:58 template here and I can click increment
  • 00:01:01 you increase the counter by two and two
  • 00:01:03 clicks of course by one that's nice and
  • 00:01:06 there's nothing wrong about this code
  • 00:01:08 though we can improve it if we had
  • 00:01:11 different places in this application
  • 00:01:13 where we want to increase the counter
  • 00:01:15 and add something to clicks but for some
  • 00:01:16 reason we couldn't share this increment
  • 00:01:18 method because you want to execute some
  • 00:01:20 average kill there're slightly different
  • 00:01:22 code anything like that well then a
  • 00:01:25 computed property might be great
  • 00:01:27 generally a computed property is a great
  • 00:01:29 idea
  • 00:01:30 whenever you have one computer property
  • 00:01:32 which depends on another one so data
  • 00:01:35 sticky a property which depends on
  • 00:01:37 another property like here we can say
  • 00:01:40 counter kind of depends on clicks
  • 00:01:42 because we could also rewrite this as
  • 00:01:44 this clicks times two though we need to
  • 00:01:48 change the order than here because if I
  • 00:01:51 now hit enter well this still is correct
  • 00:01:54 it still is the same behavior as before
  • 00:01:57 when we had the counter simply a
  • 00:02:00 incremented by two all the time now we
  • 00:02:03 simply duplicate
  • 00:02:04 clicks because that's the same effect so
  • 00:02:07 we can say counter depends on this
  • 00:02:10 clicks property therefore we can add a
  • 00:02:12 computed property and we
  • 00:02:14 you sell by adding the computed property
  • 00:02:16 to our view instance and now a reserved
  • 00:02:18 word an aviary served property there
  • 00:02:21 which also is an object now in this
  • 00:02:24 object we set up all the computed
  • 00:02:26 properties you want to have and now
  • 00:02:28 important a computed property here
  • 00:02:30 actually simply is a method so this
  • 00:02:33 method would be called counter let's say
  • 00:02:36 so I write this as a method but I still
  • 00:02:39 output it like a property in my template
  • 00:02:42 because behind-the-scenes view J's will
  • 00:02:44 simply take the value this method
  • 00:02:46 returns and take it as a value for this
  • 00:02:49 counter property which is kind of
  • 00:02:51 created behind the scenes by view J s so
  • 00:02:55 here I can then simply return and I have
  • 00:02:59 to return something in a computed
  • 00:03:00 property I can return this clicks times
  • 00:03:04 2 and that of course means I can remove
  • 00:03:07 it here so now what happens is if I
  • 00:03:10 click the increment button let's see it
  • 00:03:13 it still works
  • 00:03:15 as before but behind the scenes that
  • 00:03:17 works differently I click this button
  • 00:03:19 and the increment method gets executed
  • 00:03:21 now in this method I only change the
  • 00:03:24 clicks property however I also tell told
  • 00:03:28 view chess that I have this counter
  • 00:03:31 property which is actually a computed
  • 00:03:33 property since it's stored in the
  • 00:03:35 computed object here in the view
  • 00:03:37 instance view jeaious recognizes this
  • 00:03:39 and analyzes this counter method as it
  • 00:03:43 is here but again behind the scenes it's
  • 00:03:44 treated like a property view J's
  • 00:03:47 recognizes that counter here this
  • 00:03:49 property depends on my clicks property
  • 00:03:53 because I'm using this clicks inside of
  • 00:03:55 the method body of my counter method
  • 00:03:58 here and that means whenever clicks
  • 00:04:00 changes view chairs will also rerun this
  • 00:04:04 counter method therefore recalculate the
  • 00:04:07 value of my counter property and update
  • 00:04:10 Disney Dom as well this gets especially
  • 00:04:12 very useful if you've got many
  • 00:04:14 dependencies many connections in your
  • 00:04:16 application and then using such a
  • 00:04:18 computer property is a great place to
  • 00:04:21 ensure that your app is really reactive
  • 00:04:24 and gets updated at the right time
  • 00:04:27 in the right place