Vue源码Observer.js

Posted 2021-05-18 龖龖龖

observer.js

function Observer(data) {
    //对原型上的data赋值
    this.data = data;
    // 将data在传给walk函数
    this.walk(data);
}

Observer.prototype = {
    // walk 拿到值
    walk: function(data) {
        var me = this;//改变this
        // 拿到传递过来的data值 利用Object.keys得到所有的键然后进行循环
        Object.keys(data).forEach(function(key) {
            me.convert(key, data[key]);
        });
    },
    convert: function(key, val) {
        this.defineReactive(this.data, key, val);
    },

    defineReactive: function(data, key, val) {
        var dep = new Dep();//声明一个dep实例 后期使用
        var childObj = observe(val);//进行数据劫持
        
        Object.defineProperty(data, key, {
            enumerable: true, // 可枚举
            configurable: false, // 不能再define 只能修改一次，不然容易造成数据混乱
            get: function() {
                if (Dep.target) {
                    dep.depend();
                }
                return val;
            },
            set: function(newVal) {
                if (newVal === val) {
                    return;
                }
                val = newVal;
                // 新的值是object的话，进行监听
                childObj = observe(newVal);
                // 通知订阅者
                dep.notify();
            }
        });
    }
};
//判断 如果这个没有这个值，或者传递过来的数据类型不是对象的话终止
function observe(value, vm) {
    if (!value || typeof value !== 'object') {
        return;
    }
//否则 创建实例将值传到到函数里面
    return new Observer(value);
};


var uid = 0;
//每调用一次 将提前声明号的uid进行累加
function Dep() {
    this.id = uid++;
   //声明一个空数组 便于以后使用
    this.subs = [];
}

Dep.prototype = {
//在Dep的原型挂载一个addSub方法
    addSub: function(sub) {
    //将提前声明好的数组 将传递过来的参数进行数组添加
        this.subs.push(sub);
    },

    depend: function() {
        Dep.target.addDep(this);
    },

    removeSub: function(sub) {
    //检测subs上是否有sub
        var index = this.subs.indexOf(sub);
        //没有返回-1
        if (index != -1) {//如果有就进行删除操作
            this.subs.splice(index, 1);
        }
    },

    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

Dep.target = null;//设置默认为null,便于以后使用