>> Hi there, I'm Chris Noring.
In this video, we'll talk about Vue and their computed values.
The first thing we need to know about computed values
is that they are a computation and
what does that mean? Well, there
are different ways to compute values.
If you have a look at this code in here,
you see two computed values.
First off, we use the keyword
computed to place these values inside of our component.
Then we define the computed values that we want.
In this case, we have two different computed values.
One is called sum and the other one is called full address.
Now with the sum, you can see that I'm returning
a value and that return value is the composite,
or it consists of more than one value that we do return.
You can see that I'm returning LHS,
which stands for left-hand side,
and RHS, or right-hand side.
The whole idea of this computed value is
to show the sum of a calculation.
In the second example,
we see full address.
Full address takes a name,
an address, a city, and a country.
Final result is a full address,
like you want to show on a sticker on a package for example.
Now that we've seen what we can do with code,
we should know one more aspect.
It's not just about showing off multiple values,
but also to rely on the fact
that they are reacting. What does that mean?
Well, when something is reactive,
it means that if you were to change any of these values,
this one, or that one, or both,
this one would actually be reflected, it means it would be updated.
We will soon see that in the browser how that would work.
But its good to know that if we point
out or rather create a computed value,
were we to change any of the dependent values,
we can ensure that Vue will investigate and say,
this has changed, I better change too.
Let's move on to the browser.
Now, in our browser here, if you look at the left,
you see that we have one,
the address sticker, and two,
we have the calculator.
Here we have the sum computed
value and here we have the full address.
Let's try the first one.
We have the calculator and we say,
I'm going to make you a one and you into a two.
From what we can see here,
we see that the sum has being updated.
Why is that? Well, if we look at the file itself,
the index.js file, we can see when that happens.
Every time we try to change this,
let's say we increment it,
we see that this computed field,
this sum field is being invoked and it
has a chance to recalculate the value.
We see that it takes the value of left-hand side and
right-hand side and try to do a new summation of these.
As you can see, the final result is the new sum, which is five.
We do the same thing here.
We see immediately how this field start updating.
As you can see,
the final result is how
this computed field is doing its job for us, because after all,
what we want to computed fields for is the ability
to create dependencies between one or many fields and
we want the calculated field
to be updated every time we change one of the dependencies.
Were I to change the address,
I want to see the change here.
If I change part of the calculation,
I want to see the sum being updated and so on.
That's all I had to say about computed fields. They are great.
If you have many fields that you want to show us one,
and you can always rely on the fact that they are
reactive in the sense that all dependencies will trigger,
as we saw here in this code to the right.
We can see that the sum and full address are being invoked if
one of the dependent fields are being changed.
That's good to know as well.
[MUSIC]