Vue对某个对象的属性进行watch监听

普通的watch

1
2
3
4
5
6
7
8
9
10
data() {
return {
balance: 0
}
},
watch: {
balance (newValue, oldValue) {
console.log(newValue)
}
}

对象属性的watch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
data() {
return {
user: {
name: 'Joe.Ye',
homepage: 'http://www.appblog.cn'
}
}
},
watch: {
user: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}

只要user中的属性发生变化(可被监测到的),便会执行handler函数

对象某个具体属性的watch

如果想监测具体的属性变化,如homepage变化时,才执行handler函数,则可以利用计算属性computed做中间层。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data() {
return {
user: {
name: 'Joe.Ye',
homepage: 'http://www.appblog.cn'
}
}
},
computed: {
homepage() {
return this.user.homepage
}
},
watch: {
homepage (newValue, oldValue) {
console.log(newValue)
}
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :