Vue.js Tutorial #6 Computed Properties and Watchers in Vue

#6 Computed Properties and Watchers in Vue

Prepared By:

Create a data property called title. Create a paragraph and bind the title by converting it to lowercase and replace all spaces with a hyphen. Run it on the browser. Yes working. Let's create input and bind the title. Check it on the browser. Yes working. Here you can see the logic we implement on the title is a bit annoying and it making the template hard to maintain. So let's create a computed property to tackle that. Set this to slug. Create a computed property called 'slug'. Move the logic here. Let's check it. Yes working perfectly.

Computed properties are reactive. It will update whenever the dependent properties change. Then what happens when we use non-reactive data in computed properties? The answer is, it will never update. Let's check it.

Create a computed property called 'datetime'. Set its value to date that converted to a localized string. Create a paragraph and bind the datetime. Run it on the browser. Yes working. Here you can see there is no reactive data property we using in datetime. That means this property never going to be updated. To tackle that we can use reactive data in datetime property. Let's do it. Create a data called date. Use it in datetime. Run it. Yes working. Let's update the date. Yes, the computed property datetime also updating according to that. Let's update the date in each second and make it live by adding a few more lines of code. Create a method called 'initAutoUpdateDate' and update the date in each second using setInterval. Now it won't start to run, because the method 'initAutoUpdateDate' is just created, we didn't invoke it yet. So we can invoke it in mounted. Let's check it now. Yes, it working.

Computed Caching vs Methods:
We can use methods also to reduce complex logic implementing in templates. Let's try to do it with methods.

Create a data called title. Create a paragraph and bind the title by converting it to lowercase and replace all spaces into the hyphen. Create input and bind the title. Run it. Yes working. We can move this complex logic into a method. Create a method called 'slug' and return it. Run it on the browser. Yes working.

You can see the methods are working fine. Then way we need to use computed properties? Computed properties are cached. It updates only when it's dependencies found changes. The methods need to be executed to calculate the result each time when we call it.

Create some data called 'isVisible' and text. And set the 'isVisible' value to true. Create a computed property called 'capitalizedWithComputed' and return the text by converting it into uppercase. Create a method called 'capitalizedWithMethod' for the same. Create a division and add 'v-if' directive with isVisible as the condition. Create paragraphs and bind computed property and method. Please note, the method should be invoked. Add console log in computed and method. Run it on the browser. Yes working both. Let's check the console. Here you can see the logs of initial rendering. Let's toggle the division. Here you can see the method is executing each time we toggle the division. But computed property executed only at the initial time.

In fact, methods need to execute every time we call it. But computed properties are cached and only update when it's reactive dependencies change.

The computed caching is very helpful. Let's imagine we have a huge computation in a computed property. If there is no caching it will need to do the repeating and unwanted computations every time. But in some cases, we will need the latest results without caching. There we can use methods.

Computed setter:
By default computed properties are getter only. But we can provide setter as well. Let's check how to do that.

Create some data called 'firstName' and 'lastName'. Create a computed property. Add a method called get and return the full name by combining first and last names. Add a method called set and accept the fullName as the argument. Split the name and set it to 'firstName' and 'lastName'. Create two paragraphs and bind the first name and last name. Create a strong element and bind the 'fullName'. Run it on the browser. Let's check it with the console. Try to update the first and last names. Yes, it updated and reflected the changes in full name. Let's try to update the full name. Yes, first and last names are updated.

Watchers:
Vue provides watchers to watch particular data and perform operations according to the changes.