从作用机制和性质上看待methods,watch和computed的关系
@H_301_3@图片标题[原创]:《他三个是啥子关系呢?》@H_301_3@
首先要说,methods,watch和computed都是以函数为基础的,但各自却都不同@H_301_3@
而从作用机制和性质上看,methods和watch/computed不太一样,所以我接下来的介绍主要有两个对比:@H_301_3@
1.methods和(watch/computed)的对比@H_301_3@
2.watch和computed的对比@H_301_3@
作用机制上
@H_301_3@1.watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。@H_301_3@
2.对methods:methods里面是用来定义函数的,很显然,它需要手动调用才能执行。而不像watch和computed那样,“自动执行”预先定义的函数@H_301_3@
【总结】:methods里面定义的函数,是需要主动调用的,而和watch和computed相关的函数,会自动调用,完成我们希望完成的作用@H_301_3@
从性质上看
@H_301_3@1.methods里面定义的是函数,你显然需要像"fuc()"这样去调用它(假设函数为fuc)@H_301_3@
2.computed是计算属性,事实上和和data对象里的数据属性是同一类的(使用上),@H_301_3@
例如:@H_301_3@
你在取用的时候,用this.fullName去取用,就和取data一样(不要当成函数调用!!)@H_301_3@
3.watch:类似于监听机制+事件机制:@H_301_3@
例如:@H_301_3@
firstName的改变是这个特殊“事件”被触发的条件,而firstName对应的函数就相当于监听到事件发生后执行的方法@H_301_3@
watch和computed的对比
@H_301_3@说了这么多,下面先对watch和computed@H_301_3@
首先它们都是以Vue的依赖追踪机制为基础的,它们的共同点是:都是希望在依赖数据发生改变的时候,被依赖的数据根据预先定义好的函数,发生“自动”的变化@H_301_3@
我们当然可以自己写代码完成这一切,但却很可能造成写法混乱,代码冗余的情况。Vue为我们提供了这样一个方便的接口,统一规则@H_301_3@
但watch和computed也有明显不同的地方:@H_301_3@
watch和computed各自处理的数据关系场景不同@H_301_3@
1.watch擅长处理的场景:一个数据影响多个数据@H_301_3@
2.computed擅长处理的场景:一个数据受多个数据影响@H_301_3@
watch擅长处理的场景:一个数据影响多个数据
@H_301_3@(具体的看上图就ok,这里不再赘述)@H_301_3@
对于watch,我们先从一个场景说起@H_301_3@
在《海贼王》里面,主角团队的名称叫做:“草帽海贼团”@H_301_3@
所以我们把船员依次称为:@H_301_3@
草帽海贼团索隆,草帽海贼团娜美,以此类推。。。@H_301_3@
我们希望:当船团名称发生变更的时候,这艘船上所有船员的名字一起变更!!@H_301_3@
例如:@H_301_3@
有一天,船长路飞为了加强团队建设,弘扬海贼文化,决定“草帽海贼团”改名为“橡胶海贼团”(路飞是橡胶恶魔果实能力者)@H_301_3@
这些数据里存在这种关系:
(多个)船员名称数据 --> 依赖于 --> (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:@H_301_3@
于是船员们的称号前缀都被统一修改了!(原本是“草帽海贼团”)@H_301_3@
但是我们的路飞船长又突发奇想:我这么喜欢吃肉,干脆我们叫做“肉肉海贼团”好了吧!@H_301_3@
demo:@H_301_3@
computed擅长处理的场景:一个数据受多个数据影响
@H_301_3@我们再从一个场景说起@H_301_3@
路飞的全名叫做:蒙奇-D-路飞,他想成为海贼王,但路飞的爷爷卡普(海军英雄)因此感到非常恼怒,于是把“路飞”改成了叫“海军王”,希望他能改变志向@H_301_3@
// 将“路飞”改为“海军王”
vm.thirdName = '海军王'
// 打印路飞的全名
console.log(vm.luFei_Name)
demo:@H_301_3@
但是:@H_301_3@
有一天,路飞的逗逼爷爷卡普,一不小心发现可能把族谱搞错了,实际上,他们不是“D”之一族,而是“H”一族,也就是说,“蒙奇-D-路飞”可能要叫做“蒙奇-H-路飞”了@H_301_3@
demo:@H_301_3@
methods不处理数据逻辑关系,只提供可调用的函数
@H_301_3@相比于watch/computed,methods不处理数据逻辑关系,只提供可调用的函数@H_301_3@