vue源码分析（observe篇）

Posted 2022-12-09 一只燕仔

function Observer(data) 

    this.data = data;  //暂存data
    this.walk(data);


Observer.prototype = 
    walk: function(data) 
        var me = this;//暂存this
    
        Object.keys(data).forEach(function(key)     //对data里所有的属性名进行遍历
            me.convert(key, data[key]);
        );
    ,
    convert: function(key, val) 
        this.defineReactive(this.data, key, val);
    ,

    defineReactive: function(data, key, val) 
        var dep = new Dep(); //为data中所有属性都创建一个dep实例
       
        var childObj = observe(val); //递归遍历data中所有层次的属性

        //为原有属性新增get和set方法(数据劫持)
        Object.defineProperty(data, key, 
            enumerable: true, // 是否可枚举
            configurable: false, // 是否可重写
            get: function()  //get方法
                //判断当前Dep.target的watcher是否存在
                if (Dep.target) //当模版初始化的时候会赋值watcher实例到target上
                    //调用dep的depend方法
                    dep.depend();
                
                return val;
            ,
            set: function(newVal) 
                if (newVal === val) 
                    return;
                
                val = newVal;
                childObj = observe(newVal);
                // 通知订阅者
                dep.notify();
            
        );
    
;

function observe(value, vm) 
    //判断value是否存在或者value的数据类型是否为object(递归的终止条件)
    if (!value || typeof value !== 'object') 
        return;
    

    return new Observer(value); //返回数据劫持
;


var uid = 0; //定义一个uid

function Dep() 
 
    this.id = uid++; //自增，每创建一个dep增加一个单独标识
    this.subs = []; //watcher


Dep.prototype = 
    addSub: function(sub) 
        this.subs.push(sub);
    ,

    //调用watcher实例的addDep方法
    depend: function() 
        //Dep.target此时是watcher的实例
        //this此时是当前dep的实例
        Dep.target.addDep(this);
    ,

    removeSub: function(sub) 
        var index = this.subs.indexOf(sub);
        if (index != -1) //判断元素是否存在
            this.subs.splice(index, 1);  //截取
        
    ,

    //通知所有的watcher
    notify: function() 
        // beforeUpdate
        //遍历subs中所有的watcher的实例
        this.subs.forEach(function(sub) 
      //每个watcher实例都会调用update方法
            sub.update();
        );
        // updated
    
;

Dep.target = null; //赋空