响应式数据的原理

对象和数组的劫持

数据响应式的核心原理：利用Object.defineProperty

创建Observer类观测内部数据，使用walk函数进行循环对象对属性进行劫持，用defineReactive重新定义属性，如果属性还是对象，利用递归继续循环

class Observer {
    constructor(data) {
        Object.defineProperty(data, '__ob__', {
            value: this,
            enumerable: false //将__ob__变成不可枚举（循环的时候无法获取到）
        })
        // data.__ob__ = this; //给数据加了一个标识
        if (Array.isArray(data)) {
            //这里我们可以重写数组中的方法，7个变异方法是可以修改数组本身的
            data.__proto__ = newArrayProto
            this.observeArray(data)
        } else {
            //object.definProt  只能劫持已经存在的
            this.walk(data)
        }
    }
    walk (data) { //循环对象对属性进行劫持    -                                             
        //重新定义属性
        Object.keys(data).forEach(key => {
            defineReactive(data, key, data[key])
        })
    }
    observeArray (data) {//观测数组
        data.forEach(item => {
            observe(item)
        })
    }

}

export function defineReactive (target, key, value) {
    observe(value)
    Object.defineProperty(target, key, {
        get () {//取值的时候会执行
            console.log('用户取值了');
            return value
        },
        set (newValue) {//修改值得时候被执行
            console.log('用户修改值了');
            if (value === newValue) return
            value = newValue
        }
    })
}


export function observe (data) {
    //对这个对象进行劫持
    if (typeof data !== 'object' || data == null) {
        return //只对对象进行劫持
    }
    if (data.__ob__ instanceof Observer) {
        //如果对象上有Observer这个属性说明这个对象被代理过了
        return data.__ob__;
    }
    //如果一个对象被劫持过了就不会再被劫持
    return new Observer(data)
}

数组的劫持核心

重写数组的方法，并且观测数组中的每一项，如果是数组的话，我们需要去针对新增的属性去做判断并且把数组中的每一项在进行观测

//我们希望重写数组中的部分对象
let oldArrayProto = Array.prototype;
export let newArrayProto = Object.create(oldArrayProto)
let methods = [
    //能修改原数组的
    'push',
    'shift',
    'unshift',
    'reverse',
    'sort',  
    'splice'
]//concat slice 都不会修改原数组

methods.forEach(method => {
 newArrayProto[method] = function (...arg) {//这里重写了数组的方法，
        const result = oldArrayProto[method].call(this, ...arg) //内部掉了原来的方法
        //我们需要对新增的 数据再次进行劫持
        let inserted;
        let ob = this.__ob__;
        switch (method) {
            case 'push':
            case 'unshift': //arr.unshift(1,2,3)
                inserted = args;
                break;
            case 'splice': //arr.splice(0,1),{a:1},{a:1}
                inserted = args.slice(2);

            default:
                break
        }
        console.log(inserted); //新增的内容
        if (inserted) {
            //对新增的数组进行观测
            ob.observeArray(inserted);
        }
        return result;
    }
})