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
- 4
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
- 4
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:
var vm = new Vue({
el: '#app',
/*
data选项中的数据：
1.haiZeiTuan_Name --> 海贼团名称
2.船员的名称 = 海贼团名称（草帽海贼团） + 船员名称（例如索隆）
这些数据里存在这种关系：
（多个）船员名称数据 --> 依赖于 --> （1个)海贼团名称数据
一个数据变化 ---> 多个数据全部变化
*/
data: {
haiZeiTuan_Name: '草帽海贼团',
suoLong: '草帽海贼团索隆',
naMei: '草帽海贼团娜美',
xiangJiShi: '草帽海贼团香吉士'
},
/*
在watch中，一旦haiZeiTuan_Name（海贼团名称）发生改变
data选项中的船员名称全部会自动改变 （suoLong，naMei，xiangJiShi）
并把它们打印出来
*/
watch: {
haiZeiTuan_Name: function (newName) {
this.suoLong = newName + '索隆'
this.naMei = newName + '娜美'
this.xiangJiShi = newName + '香吉士'
console.log(this.suoLong)
console.log(this.naMei)
console.log(this.xiangJiShi)
}
}
})
// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '橡胶海贼团'
demo:
于是船员们的称号前缀都被统一修改了！(原本是“草帽海贼团”)
但是我们的路飞船长又突发奇想：我这么喜欢吃肉，干脆我们叫做“肉肉海贼团”好了吧！
我们把最下面的代码改为：
// 更改watch选项中监控的主数据
vm.haiZeiTuan_Name = '肉肉海贼团'
demo:
computed擅长处理的场景：一个数据受多个数据影响
我们再从一个场景说起
路飞的全名叫做：蒙奇-D-路飞，他想成为海贼王，但路飞的爷爷卡普（海军英雄）因此感到非常恼怒，于是把“路飞”改成了叫“海军王”，希望他能改变志向
代码如下：
var vm = new Vue({
el: '#app',
/*
data选项中的数据：firstName，secName,thirdName
computed监控的数据：lufei_Name
两者关系： lufei_Name = firstName + secName + thirdName
所以等式右边三个数据任一改变，都会直接修改 lufei_Name
*/
data: {
// 路飞的全名：蒙奇·D·路飞
firstName: '蒙奇',
secName: 'D',
thirdName: '路飞'
},
computed: {
luFei_Name: function () {
return this.firstName + this.secName + this.thirdName
}
}
})
// 将“路飞”改为“海军王”
vm.thirdName = '海军王'
// 打印路飞的全名
console.log(vm.luFei_Name)
demo:
但是：
有一天，路飞的逗逼爷爷卡普，一不小心发现可能把族谱搞错了，实际上，他们不是“D”之一族，而是“H”一族，也就是说，“蒙奇-D-路飞”可能要叫做“蒙奇-H-路飞”了
将最后一段代码改为如下：
// 将“D”改为“H”
vm.secName = 'H'
// 打印路飞的全名
console.log(vm.luFei_Name)
demo：
methods不处理数据逻辑关系，只提供可调用的函数
相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数
new Vue({
el: '#app',
template: '<div id="app"><p>{{ say() }}</p></div>',
methods: {
say: function () {
return '我要成为海贼王'
}
}
})
Look at the relationship between methods, watch and computed from the complementary function
在很多时候，computed是用来处理你使用watch和methods的时候无法处理，或者是处理起来并不太恰当的情况的
利用computed处理methods存在的重复计算情况
