立即执行
watch
是在监听属性改变时才会触发,有些时候,我们希望在组件创建后 watch 能够立即执行
可能想到的的方法就是在create
生命周期中调用一次,但这样的写法不优雅,或许我们可以使用这样的方法
export default {
data() {
return {
name: Joe
}
},
watch: {
name: {
handler: sayName ,
immediate: true
}
},
methods: {
sayName() {
console.log(this.name)
}
}
}
深度监听
在监听对象时,对象内部的属性被改变时无法触发watch
,我们可以为其设置深度监听
export default {
data: {
studen: {
name: Joe ,
skill: {
run: {
speed: fast
}
}
}
},
watch: {
studen: {
handler: sayName ,
deep: true
}
},
methods: {
sayName() {
console.log(this.studen)
}
}
}
触发监听执行多个方法
使用数组可以设置多项,形式包括字符串、函数、对象
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)
}
}
}