December 20, 2019
👉 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 are just like simple functions and are bound to Vue instance, they are used just like other normal functions.
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, 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.
📝 Thoughts by Zahid Jabbar.