Computed and watch usage scenarios

on the relationship between Methods,watch and computed from the perspective of function mechanism and nature

The first thing to say is that Methods,watch and computed are based on functions, but they are different.
And from the mechanism and nature of the action, methods and watch/computed is not the same, so my next introduction mainly has two comparisons:
Comparison of 1.methods and (watch/computed)
Comparison of 2.watch and computed
On the mechanism of action
Both 1.watch and computed are based on Vue's dependency-tracking mechanism, and they all try to deal with the fact that when a certain data (called a dependent data) changes, all dependent data that relies on that data "automatically" changes, That is, automatically call related functions to achieve data changes.
2. The inside of the methods:methods is used to define the function, it is obvious that it needs to be invoked manually to execute. Instead of "automating" predefined functions like watch and computed
"Summary": The functions defined inside the methods, which need to be actively invoked, and the functions associated with watch and computed, are automatically invoked to accomplish the function we want to accomplish.
From the nature of the view
1.methods defines a function, you obviously need to call it like "fuc ()" (assuming the function is FUC)
2.computed is the computed attribute, in fact, the same as the data attribute in the database object (in use),
For example:

computed:{
  fullname:function () {return this.firstname + lastName}
}

When you take it, use the this.fullname to get it, just like the data (not as a function call). ）
3.watch: Similar to the monitoring mechanism + event mechanism:
For example:

Watch: {
    firstname:function (val) {this.fullname = val + this.lastname}
}

The change of FirstName is the condition that this particular "event" is triggered, and the corresponding function of FirstName corresponds to the method of execution after hearing the event.
Comparison of Watch and computed
Having said so much, let's watch and computed

First, they are all based on the Vue-dependent tracking mechanism, which has the common denominator of "automatic" changes in dependent data based on predefined functions when dependent data changes.
We can, of course, write our own code to do all this, but it is likely to create confusion and code redundancy. Vue provides us with such a convenient interface, uniform rules
But watch and computed also have a distinctly different place:
Watch and computed each deal with different data relationship scenarios
1.watch is good at dealing with a scene: One data affects multiple data
2.computed is good at handling the scene: A data is affected by multiple data
Watch is good at handling scenarios: A data affects multiple data

For watch, let's start with a scene.
In "Sea Thief King" inside, the protagonist team name is called: "Straw Hat Sea Thief Regiment"
So we call the crew in turn:
The Straw Hat Sea Thief Regiment Sauron, the Straw Hat Sea Thief group Na Mei, and so on ...
We hope that when the name of the ship is changed, the names of all the crew members on the ship are changed together.
For example:
One day, Captain Luffy in order to strengthen team building, carry forward the Sea thief culture, decided that "Hat Sea Thief Regiment" renamed "Rubber Sea Thief Regiment" (Luffy is the rubber Demon fruit ability)
Our code is as follows:

    var vm = Vue ({el: ' #app ',//* Data option: 1.haizeituan_name-->) name 2. Name of the crew = Sea Thief Regiment
  Name (Straw hat group) + crew name (e.g. Sauron) This relationship exists in this data: (multiple) crew name Data--> relies on--> (1) Sea Thief group name Data a data change---> Multiple data all change * *: { Haizeituan_name: ' Straw Hat Sea Thief Regiment ', Suolong: ' Straw Hat Sea Thief Regiment ', Namei: ' Straw hat sea Thief group na Mei ', Xiangjishi: ' Straw hat sea Thief group Incense '},/* in watch, once Haizeitu An_name (name of the Pirate Regiment) change the name of the crew in the data option will automatically change (Suolong,namei,xiangjishi) and print them out * * Watch: {haizeituan_name:function ( NewName) {This.suolong = NewName + ' sauron ' This.namei = newName + ' na mei ' This.xiangjishi = newName + ' Shambhala ' console . log (This.suolong) console.log (This.namei) Console.log (This.xiangjishi)}})//change the main data monitored in the watch option Vm.haizeituan _name = ' Rubber Pirate Regiment ' demo: So the crew's title prefix has been unified modification.
(originally "Straw Hat Sea Thief Regiment") but our road spaceship long and whim: I so like to eat meat, simply we call "meat and Sea Thief Regiment" well. We change the following code to://change the main data monitored in the watch option Vm.haizeituan_name = ' Meat Pirate Regiment ' demo:computed good at dealing with: a data is affected by multiple data we'll talk about it from a scene. The full name of the road fly is called: Mntze-D -Luffy, he wants to become a pirate king, but the road fly Grandpa Carp (Navy hero) so very angry, so the "fly" changed to call "the Navy King", hoping he could change his ambition. The code is as follows: the var vm = new Vue ({el: ' #app ',//* Data option: firstname,secname,thirdname computed monitored data: lufei_name The relationship between the two: Lufei_name = firstName + secname + thirdname So if any of the three data on the right of the equation changes, it will directly modify the Lufei_name/data: {//Luffy full name: Mntze · D. Road fly FirstName: ' Mntze ', secname: ' D ', Thirdname: ' Road Fly '}, computed: {lufei_name:function () {return this.firs Tname + This.secname + this.thirdname}})//change "fly" to "Navy King" Vm.thirdname = ' Navy king '//print the full name of the road fly Console.log (vm.lufei_name ) Demo: But: One day, the road fly the Tease Grandpa Carp, accidentally found that the genealogy may be mistaken, in fact, they are not "D" family, but "H" clan, that is, "Mntze-D-Fly" may be called "Mntze-h-Road Fly" the last piece of code is changed to read as follows://change "D" to "h" vm.secname = ' h '//print the full name of the Console.log (vm.lufei_name) Demo:methods does not handle the logical relationship of data, and only provides functions that can be invoked compared to watch/computed, Methods does not handle data logic relationships, only provides callable functions new Vue ({el: ' #app ', Template: ' <div id= ' app ' ><p>{{Say ()}}</p></div&
 gt; ', methods: {say:function () {return ' I'm going to be a Pirate King '}}}

On the relationship between Methods,watch and computed from the complement of function

In many cases, computed is used to handle situations that you cannot handle when using watch and methods, or are not properly handled.
Using computed to deal with the repetitive computation of methods