watch 观察 Vue 实例上的一个表达式或者一个函数计算结果的变化
注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。
监听简单数据类型
data() {
return {
msg: "消息消息消息"
}
},
watch: {
msg(val, oldVal){
console.log("旧值: %s, 新值: %s", oldVal, val)
}
},
init() {
this.msg = "第一次改变"
this.msg = "第二次改变"
this.msg = "第三次改变"
}
上面的代码只会输出一次:旧值: 消息消息消息, 新值: 第三次改变
vue的监听属性会等js执行完毕之后,才会使用最后一次更新的值触发监听函数
deep
监听对象
data() {
return {
obj: {
name: "明妃",
age: 18
}
}
},
watch: {
obj: {
handler(val, oldVal) {
console.log("旧值: ", oldVal)
console.log("新值: ", val)
},
deep: true
},
},
监听对象时,需要添加属性deep: true,否则监听不到数据变化
还又上面打印出来新值和旧值一样,还不知道什么原因......
找到原因了,官网说明:
注意：在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。
监听对象的属性
第一种方法:直接用 对象.属性 方法拿到属性
watch: {
"obj.name"(val, oldVal){
console.log("obj.name 的 旧值: %s, 新值: %s", oldVal, val)
},
},
第二种方法:利用computed取到属性值,作为中间量转化
watch: {
objName(val, oldVal) {
console.log("objName 的 旧值: %s, 新值: %s", oldVal, val)
},
},
computed: {
objName() {
return this.obj.name
}
},
这两种方法都可以实现监听对象的属性,且取到的新值和旧值相同
监听数组
data() {
return {
arr: ["aaa", "bbb"]
}
},
watch: {
arr(val, oldVal){
console.log("旧值: ", oldVal)
console.log("新值: ", val)
},
},
监听数组(简单数据类型的数组或复杂数据类型的数组)不需要deep: true属性
immediate
immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。
data() {
return {
immediateMsg: "火之晨曦",
}
},
watch: {
immediateMsg: {
handler(val, oldVal) {
console.log("immediateMsg 旧值: %s, 新值: %s", oldVal, val)
},
immediate: true
},
},
以上代码在初始化时,immediateMsg的值不发生改变,也会输出immediateMsg 旧值: undefined, 新值: 火之晨曦
监听路由
有时候页面路由参数改变了，但是使用同一个vue组件，此时不会触发页面的刷新，所以需要监听当前路由，当监听到路由参数变化时，需要去手动做一些操作。监听路由有两种方式：
1 .
watch: {
‘$route’: function() {
handler(val, oldVal) {
// todo someThing
}
},
},
2 .
watch: {
$route() {
handler(val, oldVal) {
// todo someThing
}
},
},
