watch和computed的关系

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

watch擅长处理的场景：一个数据影响多个数据

对于watch，我们先从一个场景说起

在《海贼王》里面，主角团队的名称叫做：“草帽海贼团”

所以我们把船员依次称为：

草帽海贼团索隆,草帽海贼团娜美,以此类推。。。

我们希望：当船团名称发生变更的时候，这艘船上所有船员的名字一起变更！！

例如：

有一天，船长路飞为了加强团队建设，弘扬海贼文化，决定“草帽海贼团”改名为“橡胶海贼团”（路飞是橡胶恶魔果实能力者）

我们代码如下：

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：

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
id开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！