一、首先确认watch是一个对象,一定要当做对象来用
1 2 3 | watch:{ } |
对象:有键,有值。
1、键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。
2、值:
① 可以是【函数】:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
② 可以是【函数名】:不过这个函数名要用单引号来包裹。
③ 可以是【包括选项的对象】:选项包含有三个,如下:
a. 第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数
b. 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以监听到,因此:数据的改变不需要使用深度watch)
c. 第三个是immediate:其值是true或false,确认是否以当前的初始值执行handler的函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var vm = new Vue({ data:{ a:1, b:2, c:3 }, watch:{ //值:函数 a: function (val, oldVal) { console.log( 'new: %s, old: %s' , val, oldVal) }, //值:方法名 b: 'someMethod' , //选项的对象 c:{ handler: function (val, oldVal){ console.log(val, oldVal) }, deep: true , immediate: true } } }); |
参考地址:https://blog.csdn.net/wangxiaoxiaosen/article/details/78487089
https://blog.csdn.net/itkingone/article/details/69568498
https://blog.csdn.net/zhuming3834/article/details/79726929