使用 deep
选项时,仅会监听对象内部现有属性值的改变,不会监听对象属性的增加或删除操作。
原因是,deep
选项仅能监听对象内部属性的改变,当对象新增或删除属性时,这些操作并不会触发属性内部变化引起的更新。
解决方案1:
this.obj = Object.assign({}, this.obj)
// 父组件值
data () {
return {
obj: {
status: 0
}
}
}
mounted () {
setTimeout(() => {
this.obj.refresh = 'refresh'
this.obj = Object.assign({}, this.obj) // 解决深度监听中失效的问题
})
}
// 子组件中深度监听即可见听到obj新增或者删除属性值
watch: {
// 深度监听搜索条件参数变化
obj: {
handler (newValue) {
console.log(newValue, 'newValue obj')
},
deep: true // 深度监听
}
},