3 min read
One of the main core concepts of Vue.js is computed properties. With computed properties, we can easily compose new data that is derived from other data. And that new data will be cached until one of its dependencies changes.
What is a Computed Property
Here’s a quick example on that:. fullName is what we call a computed getter — we use it to get the computed value. But what if we also want to set it? We can define a computed setter for that, like this:. Now, whenever you set a new value to fullname (using this.fullName = 'Example Name'), firstName and lastName will update accordingly.
Let’s take an example that at first doesn’t use computed setters, and then improve it by introducing computed setters to it.
Without computed setters:. With computed setters:. Using computed setters improved our example in two ways:.
First, updating the external data feels much simpler. We now can replace :valueand @input with v-model. Also we can change the value with a simple assignment — like what we have in convertToUpperCase method. Second, changing the source of the external data only requires updating the computed setter as opposed to replacing each $emit('set-text') in the component.
So if you decided to change the source to using data from vuex, you would just need to change the setter method to something like this.$store.dispatch('SET_TEXT', value). In this Vue tutorial we learn about computed properties with logic like methods.
We cover how their caching works and the benefits it provides our application, as well as how to easily read from and write to them with getters and setters.
If you want to follow along with the examples in this lesson, you will need an app generated by the Vue CLI. If you already have one from the previous lesson, you can use it instead.
Computed properties are properties that can be bound to the template like data properties, but have logic like methods.
We use them to compose data from existing sources. A major benefit of computed properties is that they are highly performant because they are cached. Vue will only go through the re-render process if a computed property’s dependency changes.
This may sound a bit complicated at first, but computed properties are very easy to use. A computed property is defined as a function in thecomputedoption of the component’s config object. As an example, let’s say we allow the user to input their first and last name in two separate input fields.
We want to display their full name in the template so we use string interpolation to output each data property. When we run the example in the browser, it works as expected.
Then instead of outputting the two names separately in the template, we output the computed property. When we run the example in the browser, the full name shows as expected. So it basically does the same as the first example. At first glance, the computed property seems redundant. The first example without the computed property uses less code and is easier to read. While that’s certainly true, computed properties gives us two important benefits.