Look at the relationship between methods, watch and computed from the mechanism of action and nature
First thing to say, methods, watch and are computed as a function-based, but they are nothing but each different
from the mechanism of action and the nature point of view, methods, and watch / computed not the same, so I am going to introduce two main contrast:
1.methods and (watch / computed) comparison
2.watch and comparison of computed
on the mechanism of action of
1.watch computed and tracking mechanisms are dependent Vue basis, and they are trying to deal with such a thing: when certain data (called data-dependent) time change, all rely on this data "relevant" data "automatically" changes, related to the function that is automatically invoked to achieve changes in the data.
2. methods: methods which are used to define the function, it is clear that it needs to perform a manual call. And computed rather than watch it, "executed automatically" pre-defined function
[summary]: function methods defined inside, is the need to take the initiative to call, and watch and computed and related functions, will automatically call, we want to accomplish complete role
by nature
1.methods defined inside a function, you obviously need something like "fuc ()" so to call it (assuming that function as Fuc)
2.computed is calculated properties, and in fact, and data objects in the data attributes the same type (using on),
for example:
computed:{
fullName: function () { return this.firstName + lastName }
}
- 1
- 2
- 3
You take the time, to get by with this.fullName, and take on the same data (not as a function call !!)
3.watch: + Event sensing mechanism similar to the mechanism:
For example:
watch: {
firstName: function (val) { this.fullName = val + this.lastName }
}
- 1
- 2
- 3
firstName change is the special "event" condition is triggered, and the firstName the corresponding function is equivalent to the method of execution after listening to the incident
watch and compare the computed
Having said that, the following first to watch and computed
First, they are all dependent on tracking mechanisms Vue on the basis of their common: all hope in time-dependent data changes, and is dependent on the data according to pre-defined functions, happen "automatically" change
our course you can write your own code completion all of this, but the wording is likely to cause confusion, the code redundancy situation. Vue provides us with such a convenient interface, uniform rules
but watch and computed also significantly different places:
different scenarios watch data relationships and computed their treatment
1.watch good at dealing with the scene: a data affect multiple data
2.computed good handling scenario: a plurality of data by a data Effects
watch good scene processing: a plurality of data data Effect
For the watch, we start talking about a scene
in "One Piece" which, the name of the protagonist of the team called: "straw hat pirates"
So we put the crew in turn called:
straw hat pirates Sauron, straw hat pirates Nami, and so on. . .
We hope that: when the boat group name is changed, the names of all crew members on the ship changes together! !
For example:
One day, Captain Luffy in order to strengthen team building, promote the culture of pirates, decided to "straw hat pirates" was renamed "rubber pirates" (Luffy is rubber devil fruit ability person)
Our code is as follows:
EL: '#app',
/ *
data DATA options:
1.haiZeiTuan_Name -> pirates name
name = 2. The crew name pirates (straw hat pirates) + crew name (for example, Sauron)
(s) Crew Name Data -> depends on -> (1) name data pirates
a data change ---> all changes plurality of data
* /
Data: {
haiZeiTuan_Name : 'straw hat pirates',
suoLong: 'Solon straw hat pirates',
namei: 'straw hat pirates Nami',
xiangJiShi: 'Xiangjishi straw hat pirates'
},
/ *
in a watch, upon haiZeiTuan_Name (name pirates) is changed
crew names of all data option is automatically changed (suoLong, naMei, xiangJiShi)
and print them out
* /
Watch: {
haiZeiTuan_Name: function (newName) {
this.suoLong newName = + ' Sauron '
this.naMei newName + =' Nami '
this.xiangJiShi newName + =' Sunkist '
console.log (this.suoLong)
console.log (the this. namei)
console.log (this.xiangJiShi)
}
}
})
vm.haiZeiTuan_Name = 'rubber pirates'
But our path is long and spacecraft whim: I so love to eat meat, altogether we call "fleshy pirates" Well now!
We changed to the bottom of the code:
// Change the watch option to monitor the master data
vm.haiZeiTuan_Name = 'fleshy pirates'
Demo:
Luffy's full name is called: Monkey -D- Luffy, he wanted to be One Piece, but Luffy's grandfather Karp (naval hero) and therefore was very angry, so the "way to fly" change became known as "the king of the Navy" in the hope he can change the ambition
code is as follows:
var vm = new new Vue ({
EL: '#app',
/ *
firstName, secName, thirdName: data data option in the
data computed monitored: lufei_Name
two relations: lufei_Name = firstName + secName + thirdName
so three right hand side of data for any changes will directly alter lufei_Name
* /
data: {
// Luffy full name: Monkey · D · Luffy
firstName: 'Monkey ',
secName:' D ',
thirdName:' Luffy '
},
computed: {
luFei_Name: function () {
return this.firstName this.secName + + this.thirdName
}
}
})
vm.thirdName = 'Navy king'
// print Luffy full name
console.log (vm.luFei_Name)
Demo:
One day, Luffy's funny grandfather forced Kapp, you may accidentally discovered the genealogy wrong, in fact, they are not "D" of the family, but the "H" family, that is to say, "Monkey -D- Luffy "could be called" Monkey -H- Luffy "the
last piece of code to read as follows:
// the" D "changed to" H "
vm.secName = 'H'
// print Luffy full name
console.log (vm.luFei_Name)
Demo:
as compared to watch / computed, methods logic data is not processed, the function may be called only provides
new new Vue ({
EL: '#app',
Template: '<div ID = "App"> <P> {{say ()}} </ P> </ div> ",
Methods: {
say: function () {
return" I want to be Piece '
}
}
})