vue源码中的observer运作

本文主要是介绍vue源码中的observer运作，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

observer: 其主要目的就是对每条数据进行观察和劫持。我们可以在一下源码中可以看到相应的操作：

function Observer(obj) {
    this.data = obj;//暂存data数据,方便以后的操作
    this.walk(obj);//对所有属性进行遍历
}

Observer.prototype = {
    walk: function(obj) {
        var that = this;//暂存实例
        Object.keys(obj).forEach(function(key) { //对data里所有的属性名进行遍历
            that.convert(key, obj[key]);
        });
    },
    //为每个属性增加响应式
    convert: function(key, val) {
        //响应式=> defineReactive
        this.defineReactive(this.data, key, val);
    },

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

        //(Object.defineProperty数据劫持),新增get和set方法
        Object.defineProperty(obj, key, {//obj为此对象，key为新增或修改的属性，后面的{}内的描述就是属性描述
        	configurable: false, // 不可配置
            enumerable: true, // 可枚举
            get: function() {
                //判断当前Dep.target的watcher是否存在
                if (Dep.target) {//Dep.target上存放这当前需要操作的Watcher实例，调用depend会调用该Watcher实例的方法
                    dep.depend();
                }
                return val;
            },
            set: function(newVal) {
                if (newVal === val) {//如果新增数据和原有数据一样就终止运行
                    return;
                }
                //反之，就让observe对新增的数据进行劫持
                val = newVal;//新值覆盖原有的值
                childObj = observe(newVal);
                dep.notify();//Dep是Observer与Watcher的纽带，当数据变化时，会被Observer观察到，然后由Dep通知到Watcher
            }
        });
    }
};
//新建队列，重新观察
function observe(val, vm) {
    //判断val是否存在 或者val数据类型是否为对象
    if (!val || typeof val !== 'object') {
        return;
    }
    return new Observer(val);
};

这篇关于vue源码中的observer运作的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！