1.简单数据监听
var app = new Vue({
data() {
return {
a: 1
}
},
watch: {
a(newVal, oldVal) {
console.log(newVal + '--' + oldVal)
}
}
})
app.a = 2
输出:2--1
2.复杂数据监听
var app = new Vue({
data() {
return {
a: {
b: 1,
c: 2
}
}
},
watch: {
a: {
deep: true, // 深度监听
handler(newVal, oldVal) {
console.log(newVal.b + '--' + newVal.c)
console.log(oldVal.b + '--' + newVal.c)
}
}
}
})
app.a.b = 2
输出:2--2
2--2
这样监听不到具体发生的变化,如果你想监听对象的某一属性的变化,可以这样:
var app = new Vue({
data() {
return {
a: {
b: 1,
c: 2
}
}
},
watch: {
'a.b': {
deep: true,
handler(newVal, oldVal) {
console.log(newVal + '--' + oldVal)
}
}
}
})
app.a.b = 2
输出:2--1
还可以结合计算属性来实现
var app = new Vue({
data() {
return {
a: {
b: 1,
c: 2
}
}
},
watch: {
newB(newVal, oldVal) {
console.log(newVal + '--' + oldVal)
}
},
computed: {
newB() {
return this.a.b
}
}
})
app.a.b = 2
输出:2--1