业务场景:需要监听用户手动操作数据this.form,之后进行操作,但是初始化会给form赋值,怎么实现初始化赋值之后的监听呢?
思路:不在vues页面watch对象中监听数据,改成在初始化后给watch对象添加监听属性
爬坑之路:setTimeout的时候不可以用this.$nextTick()
export default{
data(){
return{
form:{},
unwatch:null //自定义的监听器
}
},
mounted(){
this.getData()//初始化数据的方法
},
methods:{
getData(){
//一系列请求接口,给form赋值=>res
this.form = res.data
//这里要开始监听数据了 重点重点重点
setTimeout(() => {
this.unwatch = this.$watch('form', {
handler () {
this.$emit('change',true) //这里是数据变化需要的操作
},
deep: true
})
}, 400)
},
reset(){//重置数据的操作
this.form = {}
this.unwatch()
}
},
watch:{
form(){
//不在这里监听啊啊啊啊
}
},
}