官方解释:

侦听器可以监听data对象属性或者计算属性的变化

watch是观察属性的变化

所以watch的属性名必须要与观察人的名字保持一致;

只要观察的值发生了变化才会触发,

divid="app"!--监听器--inputtype="text"v-model="msg"/divscriptconstvm=newVue({el:"app",data:{msg:"",showMsg:""},watch:{msg(){letnewValue=(()={=newValue},5000)}}})/script

侦听器在数据发生变化的时候就会触发,触发时,数据已经更新,我们那到就是新值,那么我们如何获取之前的旧值呢

其实当监听的属性发生变化时,侦听器会被传入两个参数

第一个参数:侦听器所监听属性的当前值,即更新后的值

第二个参数:原来旧值

divid="app"!--监听器--inputtype="text"v-model="msg"/divscriptconstvm=newVue({el:"app",data:{fruit:{name:"苹果",price:20},},watch:{fruit(val,oldval){(val);(oldval);}}})/script

如果我们按照之前的监听方式,那么我们就会发现,当我们修改fruit属性值的时候,侦听器不会被触发,侦听器会在fruit对象整体被修改时触发.

为了监听对象里某个特定属性的变化,可以在侦听器的名称中使用.操作符,就像访问这个对象的属性

divid="app"!--监听器--inputtype="text"=""/divscriptconstvm=newVue({el:"app",data:{fruit:{name:"苹果",price:20},},watch:{fruit:{//此时fruite就是一个配置对象,里面的属性都是配置选项//handler就是原来的监听函数,当数据变化是执行的函数handler(val,oldval){(val);(oldval);},//深度监听选项deep:true}}})/script

此时我们就做到了即监听这整个对象的变化,也简体对象里面所有的属性的变化,

监听除了deep选项外,还有immediate选项

指定immediate:true将立即以表达式的当前值触发回调,

watch:{fruit:{//此时fruite就是一个配置对象,里面的属性都是配置选项//handler就是原来的监听函数,当数据变化是执行的函数handler(val,oldval){(val);(oldval);},//深度监听选项deep:true,immediate:true//理解执行监听函数handler}}

但是细心的朋友就会发现我们在改变对象属性的时候,虽然触发了侦听器,但是我没发获取旧值了,我们拿到的两个形参的值都是对象更改后的新值.

示例:

divid="app"!--监听器--inputtype="text"=""/divscriptconstvm=newVue({el:"app",data:{fruit:{name:"苹果",price:20},},watch:{fruitNew:{handler(val,oldval){(11)(val);(oldval);},deep:true}},computed:{fruitNew(){(());}},})/script

除了watch选项之外，您还可以使用命令式的vm.$watch,通过Vue实例对象来监听数据

可以通过实例对象调用$watch设置监听

!--监听字符变化--divid="app"!--监听器--inputtype="text"v-model="msg"/divscriptconstvm=newVue({el:"app",data:{fruit:{name:"苹果",price:20},}})//$watch是一个实例方法vm.$watch("fruit",(val,newVal)={(val)(newVal);},{deep:true})/script