场景:###
data
对象中的初始化数据是通过异步获取到的,业务逻辑过程中又需要对list
的变化做相应处理,问题就出在初始化赋值的同时就会触发watch
里的handle
,而我们希望的是在初始化赋值的时候不要让handle
执行,只有后续的change
操作才会响应。
export default {
data () {
return {
list: []
}
},
created () {
setTimeout(() => {
this.list = ['a', 'b', 'c', 'd']
}, 300)
}
watch: {
list: function(newVal, oldVal) {
// do something
}
},
methods: {
change () {
this.list.push('12345')
}
}
}
解决办法:
说到底还是watch
建立的时机问题,既然想要watch
监控初始化之后的变化,那就在赋值完成之后,再通过实例方法(vm.$watch)
对指定的data对象进行监测就好了。
export default {
data () {
return {
list: []
}
},
created () {
setTimeout(() => {
this.list = ['a', 'b', 'c', 'd']
this.$watch('list', this.changeHandle)
}, 300)
}
methods: {
change () {
this.list.push('12345')
},
changeHandle () {
// do something
}
}
}