I'm following Vue's getting started and I'm getting confused, tried CSS Tricks and Stack Overflow and still not understanding it in practice. Someone needs to explain me like i'm five.
What I got so far:
Computed - They are cached based on dependency and only re-evaluate on dependency change.
Methods -
A method invocation will always run the function whenever a re-render happens.
What exactly defines a render or re-render? Every data:value change?
Computed and methods has the same structure, but their location on code are different... 🤔🤔🤔
//vm instance
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
//...
// in component
methods: {
reverseMessage: function () {
return this.message.split('').reverse().join('')
}
}
//...
Watch - I got confused about this one, Vue's getting started says it is a callback, alerts that is better to use computed, but don't explain for what it is used for...
I will appreciate any clarification on this topic 👍
Top comments (4)
Methods are just static functions that run once called upon. You can pass in arguments, and they can return a value but are not required to.
Computed properties will update automatically once their dependencies change. They don't accept any arguments and must return a single value.
Watch functions allow you to monitor a single property and do stuff once it changes. They don't return any value.
That's the way I see it anyway. 🙂
When to use methods
When to use computed properties
When to use watchers
(source :) )
Dinos summary is a good one. I would add that methods only run on render (when the component updates) if used in the component template. Other wise they only run when explicitly called (like when bound to an event with v-on:click). Computed is just data that's based on other data; it recalculates whenever the data it's based on changes.
Thanks for the clarifications! ⭐⭐⭐⭐⭐