vue 响应式基本实现 （基于 Object.defineProperty ）

前言：该篇文章是vue响应式的基本实现，包括对对象，数组的处理，以及对部分数组方法的重写。

        vue的响应式原理实现 ==>> 基于Object.defineProperty 实现

特点：

        1. 使用对象的时候 必须先声明属性 ，这个属性才是响应式的

        2. 增加不存在的属性 不能更新视图 （需要使用 vm.$set  ==> 该文章中没有实现）

        3. 默认会递归增加 get 和 set 属性

        4. 数组里套对象 对象是支持响应式变化的，如果是常量则没有效果

        5. 如果新增的数据 vue中也会帮你监控（对象类型）

        6. 修改数组索引和长度 是不会导致视图更新的

代码实现：

let arrayProto = Array.prototype;         //保存下数组原型上的方法
let newProto = Object.create(arrayProto);       //以 数组原型上的方法为原型 创建新的对象 即 newProto.__proto__ = arrayProto
['push', 'unshift', 'splice', 'reverse', 'sort', 'shift', 'pop'].forEach(method => {
    // 'push', 'unshift', 'splice' ==>> 这三个方法会给数组新增元素，所以需要先监控新增的元素，在调用本身的方法
    // 'reverse','sort','shift','pop' ==>> 这几个方法不会新增元素，所以只需要调用数组本身对应的方法即可
    newProto[method] = function(...args) {
        let inserted = null;         //默认没有插入新的数据，即没有调用 'push', 'unshift', 'splice'
        switch (method){
            // args 是一个数组
            case 'push':
                inserted = args;
                break;
            case 'unshift':
                inserted = args;
                break;
            case 'splice':   //splice方法有三个参数，第三个参数才是被新增的元素
                inserted = args.slice(2);       //slice返回一个新的数组
                break;
        }
        console.log('数组类型导致视图更新')
        if (inserted) ArrayObserver(inserted);      //因为inserted是一个数组，所以要调用数组处理方法 ArrayObserver
        arrayProto[method].call(this, ...args);     //调用数组本身对应的方法
    }
})

function observer(obj){
    if(typeof obj !== 'object' || obj === null){      //obj是常量
        return obj;
    }
    if(Array.isArray(obj)){         //obj是数组
        Object.setPrototypeOf(obj,newProto); // 对数组部分方法进行重写；==>> obj.__proto__ = newProto
        ArrayObserver(obj);
    }else{          // obj 是对象
        for (const key in obj) {
            // 默认obj只有一层，即 {name:'张三'}
            defineReactive(obj, key, obj[key]);
        }
    }
}

function ArrayObserver(obj){        //处理数组类型的数据
    obj.forEach(item => {
        observer(item);  //监控每一个数组对象，如果是对象，会被defineReactive，而如果是常量，则被直接返回（不监控）
    });
}

// 给对象添加get/set属性 ===>> 实现响应式原理
function defineReactive(obj, key, value){
    observer(value);        //value有可能也是一个对象，所以也需要响应式  ==>> 缺点：在数据层级较深的情况下 递归创建 响应式数据，性能不好
    Object.defineProperty(obj, key, {       //给obj的key属性添加get/set
        get(){
            // 注意：这里不能返回 obj[key]，会导致死循环（get中取值，又调用get....）
            //      ==>> RangeError: Maximum call stack size exceeded
            return value;
        },
        set(newValue){
            if(value !== newValue){     //如果新值和旧值是一样的，没必要更新
                observer(newValue);     //新值有可能也是一个对象，但如果是常量，会在 observer() 直接被返回
                value = newValue;       //这里也不能使用 obj[key] ==>> 调用get(),不能使用它的返回值去重新赋值
                console.log('视图更新')
            }
        }
    })
}

// ================== 测试代码 =================
// 多层对象
// let data = {name: {d: '123'}};
// observer(data);
// data.name.d = 'abc';
// console.log('===',data.name.d);
// ===============

// 使用对象的时候 必须先声明属性 ，这个属性才是响应式的
// let data = {name: {d: '123'}};
// observer(data);
// data.name = {age: 18}
// data.name.age = 20;
// console.log('====',data.name.age)

// ===============

// 数组里套对象 对象是支持响应式变化的，如果是常量则没有效果
let data = {name: [1, 2, 3, {age : 18}]};
observer(data);
// data.name[3].age = 30;
// data.name.splice(1, 0, 30);
data.name.push({a: 'abc'});
data.name[4].a = 'aaa'
console.log('==修改后的值',data.name[4].a)

补充：看一下 Object.create 在浏览器中的效果；

        可参考原型链的文章：ES5中对Object扩展的静态方法 -- Object.create可以实现原型继承（继承实现方法二，不常用）

                                            JS 的原型和原型链 以及 instanceof 是如何判断的（继承实现方法一，最基础，底层实现）

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！