watch的用法
watch 默认在监听属性未改变时不触发回调
三个属性:{
handler => handler(newData, oldData){} 当前要执行的函数
immediate => immediate: true 将立即以表达式的当前值触发回调:
deep => deep = true 为了发现对象内部值的变化
}
使用immediate = true,无论被监听属性是否改变,立即执行当前函数
函数声明
watch: {
cityName: { 监听当前属性
handler (newName, oldName) {
console.log(newName)
console.log(oldName)
},
immediate: true
}
}
字符串声明
watch: { 监听直接调用方法
cityName: 'changeName' changeName为方法名
}
对象声明
watch: {
cityName: { 监听当前对象内的属性变化
handler (newName, oldName) {
console.log(newName)
console.log(oldName)
},
immediate: true,
deep: true
}
}
watch: {
'cityName.name': { 给对象某个特定属性加监听,减少性能损失
handler (newName, oldName) {
console.log(newName)
console.log(oldName)
},
immediate: true,
deep: true
}
}
数组声明
watch: {
cityName: [
'handle', 直接调用方法
function handle2 (val) {
console.log('第二次调用')
},
{
handler (val) {
console.log('第三次调用')
}
}
],
'cityName.f': function (val, oldval) {
console.log('第四次调用')
}
}
methods: {
handle () {
console.log('第一个调用的')
}
}