Watchers And Computed Properties Vue Js

Computed Properties Vue Js. In the last article we talked about Vue Routing, Today’s topic is about Watchers And Computed Properties Vue Js. Data reactivity is the base for any JavaScript framework. VueJs also has several options for maintaining data reactivity. All data elements in Vue are individually reactive in nature. This means that when the value of the variable changes, it automatically updates itself to every other place where the variable is directly used. However, reactivity is a little more complex than that.

Watchers And Computed Properties Vue Js

If you are a complete beginner to Vue, this might sound weird to you. But I promise you that if you read this article in its entirety, you will have completely understood computed properties and watchers.

Computed Properties

Imagine you want to calculate the area of a square. The user will provide you with the length of one side. If you were using plain JavaScript, you would have to add an event listener that would check for any changes for that element and run a function to constantly update the val… Mahn, I am bored. This is a Vue.js Tutorial.

You already know how we roll, the following is the code that I suggest you replace within one of your components.

Let us see what we have written.

• There is an input element that binds to the data property called length.
• There is a mustache tag that outputs the value of a data property called area.
• But there is no data property called area. Are we dealing with black magic here?
• Just kidding, the area is a computed property that can be used/accessed just like a regular data property. It has been listed as a function under the computed attribute of the default Vue file export. This function operates upon the length and returns a value.
• Every time the value of length changes, the change is reflected in the area.

You could add more computed properties simply by adding more functions with return values, I’ve added a property called volume in the image below.

Watchers

Watchers are even more simple. Watcher is basically functions that are called, every time value for specified value changes. Let us just get down to business with the same example. We only need to make changes to the JavaScript here. Everything else stays the same for HTML.

Let us have a look at the things that we have changed here.

• We have initialized another data property called area.
• There is a new property called watch, it contains a function called length.
• The length function inside the watch property fires up every time the value of length changes.
• The length function takes the new value of length as a parameter, though you could also access it by using this keyword.

The output is similar to the earlier one, just the technique is different. Now we have just written code that does the same thing, in 2 different ways. Let us talk about the questions that must be confusing you right now.

Which one to use when?

Sounds like a tough question to answer. Hmm, not so much to be honest. It is very easy.

Computed properties are used to calculate a new value every-time any of its dependent value changes. Watchers on the other hand are used to run a function every-time the value of one particular data element changes. This function is often used to execute things and modify existing elements. Still, confused? Look at the table below.

Note:

Once you get familiar with Vue you will realize that most of the time, you will be tempted and might end up using computed properties for things that should be solved with watchers. Try to avoid It, as it is an anti-pattern and might end up making the code messy later.

Conclusion

We learned about computed properties and watchers. Watchers react to the change of a data element and computed properties are used to update a value every-time any of its dependent values change. A lot of people often never truly understand watchers and computed properties, They often believe both of them to be the same, which is incorrect. If you have any questions regarding watchers or computed properties, feel free to drop a comment.