1.vue中监听对象数据属性值的改变,可以使用深度监听
data () {
return {
form: {
status: '',
cpufrequency: '',
systemstacksize: '',
scalabilityclass: ''
}
}
},
watch: {
form: { // 深度监听
handler(val, oldVal){
console.log('currentForm',val, oldVal)
// 但是这两个值打印出来却都是一样的,因为它们的引用指向同一个对象/数组
},
deep:true
}
}
注意:我们应避免在监听方法中更改当前监听对象的属性值,以免再次触发监听函数
2.若只监听某个或部分属性值的变化,则可以配合计算属性computed来解决
data () {
return {
form: {
status: '',
cpufrequency: '',
systemstacksize: '',
scalabilityclass: ''
}
}
},
computed: {
status() {
return this.form.status
}
},
watch: {
status() {
console.log('currentVal', this.status)
}
}
当然,上面这种方式会多出一个计算属性,对于只有单个变化因素的场景,并不是最好的解决方式,通过查看官方api,其实还有一种方法:
data () {
return {
form: {
status: '',
cpufrequency: '',
systemstacksize: '',
scalabilityclass: ''
}
}
},
watch: {
'form.status'(val, oldVal) {
console.log('currentVal', val)
}
}
对于有多个变化因素的场景,仍然可以考虑使用计算属性的方式,这样可以减少重复执行监听操作代码,但会增加一个计算属性,这是一种空间换时间的优化思想。
data () {
return {
form: {
status: '',
cpufrequency: '',
systemstacksize: '',
scalabilityclass: ''
}
}
},
computed: {
watch_scalabilityclass() {
return (
this.form.status + '_'
+ this.form.cpufrequency
)
}
},
watch: {
watch_scalabilityclass() {
// do something
}
}
3.取消监听
var unwatch = vm.$watch('a', cb) // 返回一个取消监听函数
unwatch() // 取消观察函数
4.立即触发监听
我们有时会有这个需求,在页面初始化时执行某个监听。因此,我们可能会在 created 中去调用需要执行的监听代码,但现在我们可以使用 immediate 来实现这个功能。
watch: {
'form.status'() {
handler(val, oldVal) {
// 执行一些操作
},
immediate: true
}
}