vue简版源码observe分析

一.vue简版源码之observe

在这里插入图片描述
上图是一个大体的流程,下面按照流程来实现下:

利用observer对data进行了监听,并且提供订阅某个数据项的变化的能力

这点的实现,需要借助的是Object.defineProperty()来为对象的属性绑定get/set特性(由于利用了Object.defineProperty(),所以Vue不支持ie8),observer需要将data的所有属性都绑定get/set,很容易想到的就是利用递归来实现,请看下面代码给大家解析。

//大家请看以下代码
function Observer(data) {
    //在Observer实例上暂存data
    this.data = data;
    this.walk(data);
}
 
Observer.prototype = {
    walk: function(data) {
        //暂存this确保指向正确
        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();
        });
    }
};
 
Dep.target = null;
 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值