- [Instructor] Vue.js uses a reactivity system
that tracks changes in the data that we declare
when we create a view instance.
It can tell when changes to the data
necessitate re-rendering parts of the DOM.
To improve the performance of this process,
as well as the readability of our templates,
we can make use of something called computed properties.
A computed property is something that's derived
or calculated based on existing data properties
or even other computed properties.
In practice, they work a bit like methods,
but they have some advantages
for organization and performance.
Take a look at our mustache expression here
that shows how many characters are still available
for our description.
As JavaScript expressions go, this one's fairly readable,
but there are a lot of front-end developers
who would say that even this is too much code
for what we're claiming as a declarative template.
What a computed property allows us to do
is move this logic into our Vue instance
and replace it with a simple identifier.
In this case, we could use something like charsLeft.
This certainly makes our template cleaner.
Let's see how it works in our Vue options.
After data, I'm going to add another key called
computed which is an object
containing my computed properties.
for now, I'll add a single property called charsLeft
which we declare as a function.
And all that has to do is return the expression
that was previously in our template
which I had cut to the clipboard.
Except, I also have to remember to change deckDescription
to this.deckDescription,
because now we're inside the Vue instance
and not in the template
where we can just use the bare property name.
So if I refresh,
I can see that this should be working
the same way as before.
This number is updated on the fly.
And it's actually possible to set this up,
using a method instead.
You might be wondering about that.
I could comment this out and move it down to methods.
And the only difference is,
I would need to invoke the method
with parentheses up here,
instead of just the computed property name.
The reason that we prefer a computed property when possible
is that they're cached and only recalculated as necessary.
Whereas, the method version would be executed
every time that part of the DOM is re rendered.
At this point, we've covered
a lot of basic concepts in Vue,
but we still haven't talked about
using conditional rendering or loops within our templates.
So in the next chapter, we'll tackle those concepts
and discuss Vue's built-in support for managing CSS.
And that will open up a lot of possibilities
for a dynamic user interfaces.