vue中的watch监听器

方法一：

当监听某一属性的变化时，建议直接使用函数格式

?

1 2 3

const vm = new Vue({ 　　el:'#app',<br>　　data:{<br>　　　　username:''<br>　　},<br>　　watch:{<br>　　　　username(newVal,oldVal){<br>　　　　　　console.log(newVal,oldVal)<br>　　　　　　}<br>　　}<em id="__mceDel"><em id="__mceDel"><em id="__mceDel">}) </em></em></em>

 

方法二：

当页面初始化需要监听一次或者监听对象是对象时，使用对象格式

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

const vm = new Vue({ 　　el:'#app', 　　data:{ 　　　　info:{<br>　　　　　　username:''<br>　　　　} 　　}, 　　watch:{ 　　　　username:{ 　　　　　　handler(newVal,oldVal){ 　　　　　　　　console.log(newVal,oldVal) 　　　　　　}, 　　　　immediate:true,//表示页面初次渲染好之后，就立即触发当前的watch监听器，默认false, 　　　　deep:true, //深度监听对象中每一个字段变化 　　　　} 　　} })

　　若只想监听对象中某个字段的变化，可以直接取对应的字段进行监听，如下：

?

1 2 3 4 5 6 7

watch:{ 　　　　'info.username':{ 　　　　　　handler(newVal,oldVal){ 　　　　　　　　console.log(newVal,oldVal) 　　　　　　} 　　　　} 　　}