[Vue]手写 | Vue2.0的核心原理和函数劫持是怎么实现的.

// 进行数组方法重写
// 数组继承
let oldArrPrototype = Array.prototype;
let proto = Object.create(oldArrPrototype);
// 函数劫持
['push', 'unshift', 'shift', 'pop', 'sort'].forEach(method => {
proto[method] = function (){
// 切片处理
updateView();
oldArrPrototype[method].call(this, ...arguments);
}
})
// 判断传入的数据格式
function observer(target){
    if(typeof target !== 'object' || target === null ){
        return target;
    }
    // 数组处理找到重写的数组方法
    if(Array.isArray(target)){
        Object.setPrototypeOf(target,proto);
    }
    for (const key in target) {
        defineReactive(target, key, target[key]);
    }
}
// 定义响应式
function defineReactive(target, key, value){
    // 解决传值为对象的问题
    observer(value);
    // defineProperty 让他具有getting 和 setting 方法
    Object.defineProperty(target, key, {
        get(){
            console.group('get 触发get方法来个取值')
            return value;
        },
        set(newValue){
          console.group('set 触发set方法更新的值为');
         console.log('旧的值为 ->>', value);
         console.log('更新为 ->>', newValue);
            if(newValue !== value){
                observer(newValue)
                updateView();
                value = newValue;
            }
        }
    })
}
// 更新视图方法
function updateView(){
    console.log('触发视图更新');
}
/**
 * author:lishiwen;
 * time:2019-10-11;
 * email:lishwien@wclound.cn;
 */
// 对象测试
let obj = { value: 1 };
observer(obj);
// 取值
console.log('取值', obj.value)
console.groupEnd();
// 更新值
obj.value = 200;
console.groupEnd();
// 更新为对象的时候
obj.value = { a: 10 }
console.log(obj.value.a);
console.groupEnd();
obj.value.a = 20;
console.log(obj.value.a)
console.groupEnd();
// 数组测试
let objContainArr = {
    arr:[1, 2, 3],
}
observer(objContainArr)
console.log(objContainArr.arr)
objContainArr.arr.push(4)
console.log(objContainArr.arr)