watch高阶使用
立即执行
watch 是在监听属性改变时才会触发,有些时候,我们希望在组件创建后 watch 能够立即执行
可能想到的的方法就是在 create 生命周期中调用一次,但这样的写法不优雅,或许我们可以使用这样的方法
export default {
data() {
return {
msg: ''
}
},
watch: {
msg: {
handler: 'sayMsg',
immediate: true
}
},
methods: {
sayMsg() {
console.log(this.msg)
}
}
}
深度监听
在监听对象时,对象内部的属性被改变时无法触发 watch ,我们可以为其设置深度监听
export default {
data() {
return {
obj: {
name: '张三',
msg: {
sex: '男',
age: 18,
tel: 18888888888
}
}
}
},
watch: {
obj: {
handler: 'sayMsg',
// immediate: true
deep: true
}
},
methods: {
sayMsg() {
console.log(this.obj.msg.age)
}
}
}
触发监听执行多个方法
export default {
data: {
name: 'Joe'
},
watch: {
name: [
'sayName1',
function(newVal, oldVal) {
this.sayName2()
},
{
handler: 'sayName3',
immaediate: true
}
]
},
methods: {
sayName1() {
console.log('sayName1==>', this.name)
},
sayName2() {
console.log('sayName2==>', this.name)
},
sayName3() {
console.log('sayName3==>', this.name)
}
}
}
watch监听多个变量
watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象,再监听这个对象来实现“监听多个变量”
export default {
data() {
return {
msg1: 'apple',
msg2: 'banana'
}
},
compouted: {
msgObj() {
const { msg1, msg2 } = this
return {
msg1,
msg2
}
}
},
watch: {
msgObj: {
handler(newVal, oldVal) {
if (newVal.msg1 != oldVal.msg1) {
console.log('msg1 is change')
}
if (newVal.msg2 != oldVal.msg2) {
console.log('msg2 is change')
}
},
deep: true
}
}
}