快速掌握Vue的watch监听属性
- watch可以帮我们监听data数据对象中的属性值发生改变。
- 当监视的数据发生变化,就会执行它的回调函数。
- 注意:要监听的属性,需要在data中定义。
类型: { [key: string]: string | Function | Object | Array }
键是需要监听的表达式,值是对应回调函数 | 方法名 | 包含选项的对象。
Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个 property。
data:{
firstName:'张',
lastName:'三丰',
name:'张-三丰',
info:{
hobby:'篮球'
}
},
watch:{
lastName:{
// immediate默认为false,只有改为true时 初始化时会调用handler
immediate: true,
// 当lastName发生变化时,会调用以下handler方法
handler(newValue, oldValue){
console.log('lastName被修改了', newValue, oldValue)
}
},
// 简写:
firstName(val){
this.name = val = '-' + this.lastname
},
// 针对对象等数据类型,如果其内部属性有改动,需要深度监听
info:{
handler: function(newValue, oldValue){
console.log('info', newValue, oldValue)
},
// 深度监听 可以监听'hobby'的变化
deep: true
}
}
官方示例:
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组,它们会被逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1