vue中对象属性存在加和关系时的监听方法

同时监听对象下的某几个属性,并计算加和

最近项目中的一个小需求,一个对象所含有的属性值非常多,并且属性值之间还存在加和关系,如果要watch的话,要一个一个的写很多。

最后,watch + computed 联用可以达到想要的结果

var v = new Vue({
    data: {
        obj : {
            a : 1,
            b : 2,
            sum : 3
        }
    },
    watch: {
        //直接监听计算属性,有变化是赋值给obj.sum
        sum: function(val){
            this.obj.sum = val;
        }
    },
    computed : {
        //无法直接赋值给obj.sum
        //赋给一个计算属性,然后交由watch监听
        sum(){
            return this.obj.a + this.obj.c;
        }
    }
})

当然,解决需求的方法有多种,这只是项目当中使用的一个。

顺带记录下其他的:监听对象下的单个属性

Vue提供了watch对象单个属性的方法,在官网文档中的讲到的,根据需要有两种方式:

var v = new Vue({
    data: {
        obj : {
            a : 1,
            b : 2,
            c : 3
        }
    },
    watch: {
        //将对象作为整体,监听对象下的所有属性
        obj: {
            handler: function (val, oldVal) {
                console.log('watch',val, oldVal);
            },
            deep: true,     //表示深度watcher
            //immediate : true //表示初始化时就立即触发一次handler中的function[默认为false]
        },
        //或者直接监听对象下的某个属性
        'obj.c' : function(val, oldVal){
            console.log('watch',val, oldVal);
        }
    }
})

发表评论

电子邮件地址不会被公开。 必填项已用*标注