Vue2 双向数据绑定(一)-- 观察者构造函数

发布日期:2019-06-07 阅读量:597

1. 创建观察者模型

    // observer.js
    /**
     * 观察者模型
     * param { objec } data 数据
     */
    function observe(data) {
        if (!data || typeof data !== 'object') { // 检查对象为空或者不是对象则返回
            return;
        }
        Object.keys(data).forEach(function(key) { // 遍历所有属性
            defineReactive(data, key, data[key]); // 响应式数据 往下看此方法↓
        })
    }
    
    function defineReactive(data, key, val) {
        observe(val); // 循环遍历
        var dep = new Dep; // 订阅器 下一章
        Object.defineProperty(data, key, { // 拦截属性并监听
            enumerable: true, // 可枚举
            configurable: true, // 可修改和删除
            get: function() {
                if (dep.target) { // 添加订阅者
                    dep.addSub(dep.target);
                }
                return val;
            },
            set: function(newval) {
                if (val === newval) { // 新旧值相等
                    return;
                }
                val = newval;
                dep.notify(); // 通知订阅者
            }
        });
    }