|
|
立即执行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
}
}
} |
程序猿的技术大观园：www.javathinker.net
|
|
Java技术网站 → 『 Java开发技术 』 → 『 Web前端开发技术专题 』 → Vue watcher的高级用法
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密
