数据
1 data(){ 2 currentChoose:'', 3 obj:{ 4 a:'', 5 b:'' 6 } 7 }
1、基础用法
监听函数,如事例数据currentChoose数据形式;基本用法在第一次绑定数据时不会监听,只有当值发生改变时才会执行;
1 watch:{ 2 currentChoose(val, oldVal){ 3 console.log("currentChoose = ", val, oldVal); 4 } 5 },
2、immediate 和 handler用法
最初绑定值的时候执行;
1 currentChoose: { 2 /* 数据发生变化就会调用这个函数 */ 3 handler(newVal, oldVal) { 4 console.log('val:', newVal, oldVal) 5 }, 6 /* true:进入页面就触发 */ 7 immediate: true 8 }
3、深度监听(deep)
对象内部数据发生变化时,用到深度监听;可以监听到obj.a、obj.b数据的变化;
1 watch: { 2 obj: { 3 /* 数据发生变化就会调用这个函数 */ 4 handler(newVal, oldVal) { 5 console.log('val:', newVal, oldVal) 6 }, 7 /* true:进入页面就触发 */ 8 immediate: true, 9 /* 深度监听数据变化 */ 10 deep: true 11 } 12 }
只监听对象中一个属性值的方法
1 watch: { 2 'obj.a': { 3 /* 数据发生变化就会调用这个函数 */ 4 handler(newVal, oldVal) { 5 console.log('val:', newVal, oldVal) 6 }, 7 /* true:进入页面就触发 */ 8 immediate: true, 9 /* 深度监听数据变化 */ 10 deep: true 11 } 12 }