methods
Properties within Methods are functions bound to a Vue instance. “Methods” are used when you want something to be executed after an event or when you want a function to be executed whenever the state of the instance/component changes after which the DOM is re-rendered. “Methods” are also executed every time the instance (component) is loaded.
When this data changes, the view will re-render. Method invocation will always run the function whenever a re-render happens.
Vue.js documentation
This behavior of methods is made possible by the fact that Vue.js does not take into account what is inside the method, so the method will be recalculated even if the change does not affect the method.
Example
In this example we have two methods (“notification()” and “printValueB()”) whose functionality is simple and described by the name of the method itself. However, the functionality that is important in this example is printing a message to the console every time any button is clicked.
The first thing to pay attention to is the fact that immediately after loading the Vue instance messages from both methods are printed in the console, which confirms the fact that the methods are executed every time the Vue instance (component) is loaded.
Then you should monitor the console after each click on the action button, because after each click, two new messages are printed, regardless of which button was clicked. This indicates that both methods are executed every time the DOM is re-rendered after a given property change, and even a method that is not affected by the given property change.
See the Pen Method specificity in Vue.js by Web Programming (@chos) on CodePen.
Conclusion:
Therefore, due to everything mentioned, it should be emphasized that in the case of frequent user interface updates, there may be problems with the performance of the application, because resources are consumed when restarting all methods. For example, if we have an application that displays a timer that is updated every second, all the functions in the “methods” object will be called to execute after every second, and recalculated regardless of their purpose. In this case, it is recommended to use computed properties.
computed
“Computed” properties are an extension of data properties, they also return a value like the given property:
See the Pen
Computed is an extension of the given property by Web Programming (@chos)
on CodePen.
From the previous example it can be seen that “computed properties” are very useful formanipulation of already existing data. Since, like data, they always return a value, the name of such a function becomes a property and is used in the application in the same way as we use the “data” property (we do not need to call it as a method). Essentially, “computed” properties are variables, whose values depend on other factors and will not be recomputed unless the dependencies change. Which implies that the function will use its previously calculated (so-called cached) value, as long as there is no dependency change.
Computed properties are not intended to store data, moreover, if a “computed” property returns an object, it will always be a new object, not a modified version of the previous one. “Computed” properties must be functions whose actions must be synchronous and should not have side effects.
When to use Computed properties?
The functions inside the “computed” property are used whenever we have some data that we need to manipulate, transform, filter, and before using it in the template. Use “computed” properties when you want to mutate a property that depends on another property being changed. “Computed” properties should be used as a replacement for inline expressions in the template frame when we have more complex logic.
Some examples of tasks that are good candidates for using “computed” properties are:
- Updating large amounts of information as the user types, such as filtering a list
- Collection of information from “Vuex store”
- Form Validation
- Data visualizations that change depending on what the user needs to see
Example
This example shows the use of the “computed” property for a large set of operations:
|
1 2 3 4 5 6 |
computed: { velikiProracun () { // ... some big calculation that after some time returns the result return 2 } } |
Now we can use the result of these “hard” calculations over and over again within other operations without fear that they will be recalculated if there is no need (ie if they have not changed :
|
1 2 3 4 5 |
methods: { jednostavniProracun (input) { return input * this.velikiProracun } } |
Should use “computed” or “methods” property?
I will try to explain this dilemma through an example in which, although we use different properties, we get the same ultimate functionality.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="example"> <p>Originalna poruka: "{{ message }}"</p> <p>Obrnuta poruka: "{{ reversedMessage() }}"</p> </div> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } }) </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="example"> <p>Originalna poruka: "{{ message }}"</p> <p>Obrnuta poruka: "{{ reversedMessage }}"</p> </div> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } } }) </script> |
The end result is the same, but that doesn’t mean the difference doesn’t exist. The function inside “methods” will be executed every time the page is rendered ie. on every possible DOM change (not only changing the “messages” property), while using the computed property, Vue remembers the value of the property the computed property depends on (messages) and calculates the computed property only if the “dependency” changes, otherwise it returns the cached value.
We conclude:
if the logic of our application has “hard”calculations, and does not require recalculation of the property on every page rendering, the “computed” property should be used (because we gain performance due to caching). However, if the logic requires recalculation every time the page is rendered, ie. on any change (not just dependency change), then use use “methods”.
NOTE:
If the computed property is used within double curly brackets ie. if the interpolation of the JavaScript expression is performed, then only the name of the “computed” property is specified (without the parentheses that indicate the invocation and execution of the function)
eg.
{{ nekoComputedSvojstvo }}
This is another similarity with the “data” property because the “computed” property always returns some value, so practically we expect that prepared (cached) value to be printed at the interpolation point.
Example
See the Pen
Computed Vue by Web Programming (@chos)
on CodePen.
watch
The “watch” property provides an additional level of control, allowing us to monitor changes in the model (data). The functions inside the “watch” object are fired only when a certain property within the given object changes. It should be noted that the “watched” property can track changes on only one property
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName } } }) |
NOTE:
The name of the watcher must be the same as the name of the given property whose change it watches. Through the parameter of the watch function, the changed value of the property that we are “monitoring”
is passed
Deep watch
In order to monitor non-level (nested) properties of an object, we need to set the value of the “deep” parameter to “true”:
|
1 2 3 4 5 6 7 8 |
watch: { nekoSvojstvo: { handler: function () { ... }, deep: true } } |
When to use the watch property?
“Watch” properties are more specific than computed properties and therefore have a narrower field of action, so they are used less often. Use them when you need to perform some logic after changing a specific child property within the “data” object, where the desired action is:
- asynchronous operation
- calculation of the so-called intermediate result
- further reducing the number of activations of certain operations (e.g. debounce on input event)
In addition to the mentioned cases, we can apply watch for many other functionalities, but it should be carefully evaluated, because although executing some functionality with the “watch” property is feasible, it does not mean that it is recommended, because it can be more complicated than using the “computed” property. The bottom line is that the “watch” property should only be used when the “computed” properties cannot solve your problem.
Example
This example shows a situation where we cannot solve the problem with the “computed” property. One reason for using the “watch” property in this example is to perform an asynchronous operation inside it, and another is to define an intermediate result.(answer), until the final answer is received. Neither of these tasks could be done with the “computed” property.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...' this.nekiAsinhroniZahtev() } }, . . . }) |
Example
In this example, we use the property “searchQuery” with which we monitor the change of the data property of the same name, after which we send an asynchronous request to the server:
See the Pen Watch property for asynchronous request to server by Web Programming (@chos) on CodePen.
Application through example
Through this example I will try to explain the application of each of these important properties.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var vm = new Vue({ el: '#welcome', data: { message: 'Hello', name: 'World', nameEdits: 0 }, methods: { numRenders: function () { console.log('Page rendered') } }, computed: { welcomeMessage: function () { return this.message + ' ' + this.name } }, watch: { name: function () { if (this.message.toLowerCase() === 'reset') { this.nameEdits = 0 } else { this.nameEdits += 1 } } } }) |
a) methods section
The function “numRenders” from the “methods” section will be called with each rerender. So whenever anything is updated on the UI, the “numRenders” function is called.
b) computed section
In the “computed” section, welcomeMessage will be called only when “message” or “name” changes, because it depends on those two things. So if any of the other variables like “nameEdits”, “welcomeMessage” change, our function in the “computed” section won’t be called again, because it doesn’t depend on them.
c) watch section
The “name” function in the “watch” section tracks only changes to the “name” value from the “data” object. This means that whenever “name” changes, our function is called which updates and changes the value of “nameEdits”. If any of the other variables from the “data” object “nameEdits” or “message” change, our u function will not be called again, because it does not track them.