[JavaScript知识库]vue响应式原理

vue通过数据劫持和发布者与订阅者模式实现数据的双向绑定

首先实现了一个observe方法，把data传进去，如果该data不是对象类型数据则return，遍历这个data，分别把data和每个key和value传进定义好的definereactive方法中，在definereactive方法中首先会递归遍历其子属性，然后在调用Object.defineProperty对data的属性进行数据劫持，每属性都有自己对应的dep实例，然后在get那里收集依赖，添加在dep实例里面，当其数据发生变化时就会调用set，所以在set那里调用dep实例里面的notify()方法，通知所有依赖，然后就会遍历收集到依赖这个数组，触发更新方法，从而实现一个页面的更新

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;
            console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');
            dep.notify(); // 如果数据变化，通知所有订阅者
        }
    });
}
Dep.target = null;