Without further ado, let's go straight to the explanation.
Let's first implement a case with computed and watch respectively.
Computed implementation (upper H5 part, lower Vue part):
Watch implementation:
After comparison, we can see that computed is more convenient than watch, with less code, and there are almost duplicate codes in watch.
In the official document, the official also said that computed is better, but the official also raised questions: isn't it?
Then let's put forward a new requirement: 'When the surname changes, the full name changes after a delay of one second'
Watch adds a setTimeout
Then let's add a setTimeout to computed
result:
Failed fullName disappeared directly
Let's analyze the reasons for failure
There is a callback function in setTimeout, we return to the callback function, right, it will not be displayed on the page if it is not in the fullName, right? let's return
It shows that computed did not receive the return value, so it can also show that computed needs to return to get the value.
Let's take a closer look:
Watch changes the result by modifying its own code, but computed changes the result through return.
Is it possible to say that asynchronous operations cannot be enabled in computed properties to maintain data?
Conclusion: What computed can do, watch can also do
(We choose computed when both of them can do it)
What watch can do, computed may not be able to do (eg: watch can perform asynchronous operations)
Then we have involved a hidden little detail here.
Arrow functions cannot be used in methods, computed, and watch
What does it mean? We still use a case to illustrate ( use watch to monitor the weather case)
using a normal function
What is printed is also vm
using arrow functions
The printed one has become Window
In coding, the value contained in vm will be needed, and we need to get it before proceeding. So we use arrow functions and ordinary functions for comparison. (Of course, if you don’t need to use vm, such as popping up dialog box 1), then what function to use can be
Using the arrow function in methods, etc. will find the window (methods, computed, watch itself is managed by vm) because there is no this point in it, then it will look outside
Then we will wonder why we use the arrow function for the timer in the watch
Because setTimeout does belong to the firstName management under Vue, but the callback function contained in setTimeout does not belong to Vue management, but belongs to browser timing management. Then if you don’t write an arrow function, this is window, and you write an arrow function. As mentioned above, if you can’t find it, you’ll go outside to find firstName, and firstName doesn’t write an arrow function, and it’s a function managed by Vue. (Ordinary function), at this time this will point to vm
There may be doubts again. So many of us are confused. Here is a summary:
1. The functions (computed, methods, watch) managed by Vue are best written as ordinary functions, and the point of this will go to the vm or component instantiation object.
2. The functions that are not managed by Vue (timer callback function, ajax callback function) are best written as arrow functions, and this points to the vm or component instantiation object.
Point out what is wrong and learn to make corrections.
My learning summary, if it helps you, please collect it and give it a thumbs up!