You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

1.5 KiB

Fix.set和Fix.del是为了解决什么问题

为了知道Fix.set和Fix.del是做什么的,首先要清楚Fix有哪些场景watch不到.

熟悉Vue的同学肯定知道,Vue2.0版本中的$set$delete,其实原理是类似的

    state: function () {
        return {
            obj: {
                a: 1,
            },
            arr: [0, 1],
        };
    },

    watch: {
        "obj.b": function () {
            console.log(this.model.obj);
        },
        "arr.2": function () {
            console.log(this.model.obj);
        },
    },

    actions: {
        changeArr: function () {
            //  这两种形式都不能触发watch
            this.model.obj.b = 2;
            this.model.arr[2] = 2;
        },
    },

Fix.set在修改对象属性后会手动触发一次通知,因此原本无法watch到变更的场景又可以了.

    Fix.set(this.model.obj, "b", 2);
    Fix.set(this.model.arr, 2, 2);

同样的,Fix.del可以正常触发对删除属性的watch

    watch: {
        "obj.a": function () {
            console.log(this.model.obj);
        },
    },

    actions: {
        changeArr: function () {
            // delete this.model.obj.a;
            Fix.del(this.model.obj, "a");
        },
    },

很多数情况下我们不借助Fix.setFix.delete也能实现功能,例如后续讲到的11、Fix中对数组、对象的操作技巧也可以解决我们的一些问题