Hello everyone and welcome back.
In the first few instants lesson we have seen that it is definitely possible to define and use expressions
vertically within our templates.
Like in the example shown here below however it is easy to understand our using complex expressions
can quickly make our code difficult to read and maintain.
Increasing the risk of bugs and that's why for any complex logic few offers as the computed properties
similar to methods that we've already learned to use.
Are different from them because the results are cached until the values they use change sometimes called
also computed values.
We can think of these as an extension of our data model useful to show values resulting from processing.
It is good practice to avoid changing the values of the data model through the computed properties.
Keeping them pure meaning it is best to just use them to return and show values.
Let's make some examples.
OK.
So we are in business to your code and let's jump right into the main dots Joe.
Yes five who have said that methods and computed properties are very similar.
At least in the way we define them.
And the biggest difference between computed properties and methods is that computed properties cache
the result of data processing and keep using that same result until the values they've used change.
So let's make an example right away.
I'm going to define first of all a method get a random number which is just going to return a mass not
random.
So I'm also now going to define computed and yeah I'm going to define kind of the same method of defining
error which this time is a computed property and therefore I'm just going to call it get a random computed
going back to the HDMI file we are now going to use both.
They get around don't compete with property the get random number and we're going to use each of them
three times to see how the results differ from each other.
So let's just define some paragraphs.
The so method 1.
And of course we need to do method name.
So get that on the number inside curly braces like so.
So 1 2 and 3
like so maybe we can even add in a chart tag.
Let's now do something similar for the computed properties.
So this is going to be computed.
We do not need any parentheses we can just copy names so get random computed one two and three times.
So let's not jump into chrome and let's see what up and so as you can see I've already opened the page.
I'm going to refresh and if we now zoom in as you can see the method is being called three times.
Therefore we get three different random numbers as you can see why the computed property is that he's
showing us the same number.
And that's because the value has been cached.
As we've said it is important to think about the computed properties as an extension of what we define
in the detail object basically an extension of our data model.
And that's also why we have this difference as you can see if I remove the parenthesis from get a random
number we get the function native code.
But if I try to add them to a computer's property and if we now refresh the page we see that everything
kind of crashed.
Let's open up the development console console and zooming in we can read a useful error message which
says get random computed is not a function of course it's a computed property.
Let's now go back to the editor and let's make another example because as we said of course the computer
properties are really useful especially when you need to process some data.
So going back to the main dot the G.S. file I'm now going to define a data object inside the detail
object.
I'm going to define first name John.
And last name though.
And we can now define a computed property to get the full name of John Doe as if that was defined inside
the data model itself.
So I'm just going to call the full name which is often the case meaning you often call these computed
properties as if they were a value in say the detail object.
So yeah I'm simply going to refer back to excel.
So these dot first name like so then a whitespace and then yet these dot last name.
Get out go back to the HMO file and just use full name like so.
So maybe it be our tag.
Maybe an age 3 under your full name and then full name like so let's go back to grow up.
Let's refresh and it is the full name is John Doe.
And let's now make it one last example.
Going back to the main DOJ yes file I'm now going to define another computed property and let's say
this time we want to reverse the version of its full name so reversed.
Full name.
So to expand a window like so.
So this is going to be first equals this not first name that split dot reverse dot join like so.
So this is first let's define last of course this is going to be last name.
And yeah we can pass
last and now going back to the H demo file we can now use the reversed version of the name.
So reverse full name.
Let's go back to crawl.
Let's refresh and that it is awesome.
So let's now go full screen wave crawl.
Let's open up the console.
And so yeah I'm just going to change first name so rapidly.
First name equals Max and as you can see now that one of the values used in the processing has changed
the value returned to change accordingly.