Methods, Watchers and Computed Properties in Vue.js

zahidjabbar

Zahid Jabbar

Posted on December 16, 2019

Methods, Watchers and Computed Properties in Vue.js

🎯If you're interested in learning Vue.js all you need is open its documentation and you are ready to start working with Vue.js and develop cool apps. It is so beautifully written that a person who knows HTML, CSS and JavaScript finds no hurdles getting started with Vue.js and this is what makes Vue.js amazing.

👨‍💻As I've started learning Vue.js and I am also documenting my journey. So today's post is about methods, watchers and computed properties in Vue.js. Let's explore them.

Methods:

Methods are just like simple functions and are bound to Vue instance, they are used just like other normal functions.

Computed Properties:

Computed properties are a little bit different from methods as they execute just like normal functions. They, in simple words, are calculations that will be cached and will only be updated when their dependencies change.

Let’s suppose we have a logic that runs heavy calculations and when you run this piece of code their dependency is not changing it's better to use computed properties because with them you don’t need to keep rerunning those heavy calculations every time something changes in the DOM or virtual dom.

The thing to understand about computed properties is that it’s a different view of the data. As if you are taking the data, playing with it, and giving something different to the user. Computed properties don’t affect the original data. According to Sara Drasner, computed properties are highly performant but should be used with understanding.

P.S: We don’t run computed properties as if they are functions but as if they are data properties. Although the declaration is like functions.

Watchers:

Watchers, no doubt, are similar to methods but there the difference lies in their usage. Watchers are good for asynchronous updates and transitions with data change.
Watchers are declared the same way as methods and computed properties but the name of watcher should be the same of property you want to watch.

📖I am learning these topics. If you think I am missing something or perceiving something wrong, kindly let me know.

Peace✌️

💖 💪 🙅 🚩
zahidjabbar
Zahid Jabbar

Posted on December 16, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related