VUE官方文档:
Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。
watch是一个对象,对象就有键,有值。
键是观察表达式,就是要监控的对象,比如说$route,这个就是要监控路由的变化。或者是data中的某个变量。
值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值。
值也可以是函数名:不过这个函数名要用单引号来包裹。
第三种情况厉害了。
值是包括选项的对象:选项包括有三个。
第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
// vue 侦听器(当侦听对象的值发生改变时,执行处理器)
watch: {
// 键是对象
// 值是函数
passwordType: function(val, oldVal) {
console.log("new: %s, old: %s", val, oldVal);
},
// 键是字符串表达式(字符串的形式监听对象属性,监听对象的某些属性,特定场景可代替deep做深度监控)
// 值是方法名
'loginForm.password': 'doMethod',
// 键是路由对象
// 值是对象(含有handler,deep,immediate)三个选项
$route: {
//侦听表达式
handler: function(route) {
//处理器
this.watchQRResult(window.location.href);
const query = route.query;
if (query) {
this.redirect = query.redirect;
this.otherQuery = this.getOtherQuery(query);
}
},
immediate: true //初始化时是否执行
}
},