vue配置项---watch的使用
watch有四种常用用法
情况一:基础监听,比如监听data中定义的某个数据。
data() {
return {
msg: "hello",
};
},
watch: {
msg(newmsg, oldmsg) {
console.log(newmsg);
},
},
直接写一个监听处理函数,默认参数第一个是新值,第二个是旧值。每次监听到msg变化都会执行这个函数。
情况二:使用handle方法immediate与deep属性。
data() {
return {
msg: {
name: "liu",
age: "18",
},
};
},
watch: {
msg: {
handler(newmsg, oldmsg) {
console.log(newmsg);
},
immediate: true,
deep: true,
},
}
一般情况下,在数据第一次绑定时不会执行监听函数,只有当值变化时才会执行监听函数。此时将immediate设置为true可以实现首次监听。
当监听对象的改变时普通的watch方法无法监听对象内部属性的变化,需要设置deep属性,开启深度监听deep为true时则改对象中的所有属性都会被监听,对象中每个属性改变都会执行handler函数。如果只想监听对象中某个属性的变化可以用如下写法...(情况三)
情况三:只监听对象中的某个属性
data() {
return {
msg: {
name: "liu",
age: "18",
},
};
},
watch: {
"msg.name": { //键路径必须加上引号
handler(newmsg, oldmsg) {
console.log(newmsg);
},
immediate: true,
deep: true,
},
},
也可以使用函数的形式
情况四:监听路由变化
watch: {
$route(to, from) {
var toName = to.name;
var toIndex = to.meta.index;
var fromIndex = from.meta.index;
this.transitionName = toIndex < fromIndex ? "slide-right" : "slide-left";
},
},
监听路由$route有两个默认参数,to、form
to:存放跳转后改变的数据
form:跳转前的数据
举个例子:
这里我携带了query参数分别是 categoryName="图书、音像、电子书刊" category1Id=1
那么我开始跳转到如果我携带的query参数发生改变是否能触发watch的监视呢
让我们证明一下
我的query参数已经修改了,那么控制台一定会输出to和from
我们由控制台可以看出
to里面的这个query是我们跳转过后的query参数
而from里面的query是上一个的query参数