Vue has another powerful feature called computed properties. Computed properties let us perform transformations or calculations based on our data. Now, don't let that scare you. I know it sounds a little abstract, but it's really fairly straightforward but super, super powerful.
Let's take a look at an example in order to get an idea of what computed props are. Let's say we wanted to enforce a character limit on our new item field. And we wanted to show our users how many characters they had left while they typed. Well, that's the perfect use case for a computed property.
In order to do this, the first thing we would need to do is import a computed function from view. Just like ref, computed is a helper function provided by view that helps us interact with its reactivity system. OK, next I'll create a variable called character count. And I'll set it equal to a function that computes the number of characters of new item.
Now, in order to handle this as a computed prop that will behave in a performant manner and only update when new item updates, we'll pass the function to the computed function. And that's how you create a computed prop. Now, let's use it to display the character count on the screen. I'll use a p tag with the class of counter print out the character count, and then just hard code in a static two hundred here.
All right, now when we type in our input, you can see the character count update in real time. Isn't that awesome? Computed properties are extremely powerful tools for encapsulating data transformations and manipulations that always stay in sync with the data that they reference. All right, so let's try another example.
How about we use a computed property to flip our items so that the newest items will always show up at the top of our list? First, though, let's get rid of the example code from our character count example. I'll remove the p tag and the computed prop from the script section. Now, underneath items, I'll create a new variable called reversed items.
And once again, we'll call computed, passing it a function. Inside of reversed items, we need to return a reversed array of items. it's very important to actually return a value from a computed property. Otherwise, Vue won't know what the value should be.
All right. Well, then to flip our items array, we can use JavaScript's dot reverse method. However, the reverse method actually alters the array that it's called on. That's not what we want.
Remember that computed properties are only for transforming data for our presentation layer. they should not alter or change the existing data. To avoid that, we can use the spread operator to make a clone or copy of the array. Accidentally changing or mutating an underlying data value in a computed prompt is a big source of headaches and bugs.
So be sure to keep that in mind when you're working with them. Now, to use this in our template, we'll simply replace the items in our v-for with reversed items. And on the right-hand side, you see it does exactly what we wanted it to do. Let's also try adding a new item to the list.
Sure enough, it goes right to the top Before we end this lesson on computed props, let me show you one more little tip on working with them. We can shorten up the definition of the computed prop by using an arrow function on one line that infers the return statement, like this. I wanted to mention it because you'll probably see this fairly often. And for short, sweet computed properties, this works great.