1、watch钩子函数监听数据的变化
watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算。
<div>
<p>FullName: { {fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div>new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: {firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName; }}
})handler方法和immediate属性
这时候需要增加immediate属性,设置为true,如果不需要就设置false,那就是初始化不会监听变化,这时候需要将watch部分的代码修改如何
watch: { firstName: { handler(newName, oldName) { this.fullName = newName + ' ' + this.lastName; }, // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法 immediate: true }}
注意:
在watch中,如果对对象进行监听,只有对象obj被重新赋值时,watch才会被监听到,这个时候无法对obj里面的属性的变化进行监听,这时候,我们可以只对这个属性监听,可以是使用字符串形式监听
watch: { 'obj.a': { handler(newName, oldName) { console.log('obj.a changed'); }, immediate: true, // deep: true }}
应用场景:
可以只用watch来监听数据的变化实时更新数据的变化
// 搜索框
2、computed钩子函数监听数据的变化
读取computed里面的值还是用this.changeVal
3、watch和computed各自处理的数据关系场景不同 (来源于)知识点1:watch擅长处理的场景:一个数据影响多个数据
知识点2:computed擅长处理的场景:一个数据受多个数据影响对于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:methods不处理数据逻辑关系,只提供可调用的函数相比于watch/computed,methods不处理数据逻辑关系,只提供可调用的函数 new Vue({ el: '#app', template: '', methods: { say: function () { return '我要成为海贼王' } }}){
{ say() }}