vue简版源码 Observer

<script src="./mvvm-master/js/observer.js"></script>  // observer 观察者

Observer

function Observer(data) {       //在Observer实例上暂存data    this.data = data;    this.walk(data);}Observer.prototype = {       walk: function(data) {           var me = this;        //对data里所有的属性名进行遍历        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) {           //为data中所有层次的属性都创建一个dep实例        var dep = new Dep();        //递归遍历data中所有层次的属性        var childObj = observe(val);        //为原有属性新增get和set方法(数据劫持)        Object.defineProperty(data, key, {               enumerable: true, // 可枚举            configurable: false, // 不能再define            get: function() {                   //判断当前Dep.target的watcher是否存在                if (Dep.target) {   //当模版初始化的时候会赋值watcher实例到target上                    //调用dep的depend方法                    dep.depend();                }                return val;            },            set: function(newVal) {                   if (newVal === val) {                       return;                }                val = newVal;                // 新的值是object的话，进行监听                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;function Dep() {       //没创建一个dep都会给这个dep增加一个独立的标识    this.id = uid++;    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;