vue怎么实现初始化数据之后监听数据变化并执行操作

169 阅读1分钟
业务场景:需要监听用户手动操作数据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(){
            //不在这里监听啊啊啊啊
        }
    },
}