vue数据响应式原理重写函数实现数组响应式监听

import { observe } from "./dataResp"
const output = () => {
    var obj = {
        data: {
            data: {
                map: {
                    dom: {
                        isgin: true
                    }
                },
                arg: 13
            },
            name: "小猫猫"
        },
        bool: [1,2,3,4]
    };
    observe(obj);
    obj.bool.push(7);
    document.getElementById("text").innerHTML = obj.data.name;
}
export default output

export const def = function(obj,key,value,enumerable) {
    Object.defineProperty(obj,key,{
        value,
        enumerable,
        //true  设为可写
        writable: true,
        //true  设为可被删除
        configurable: true
    });
}

import {<!--{C}%3C!%2D%2D%20%2D%2D%3E--> def } from './def.js';

import { def } from './def.js';
const arrayPrototype = Array.prototype;
export const arrayMethods = Object.create(arrayPrototype);
const redefineArrayMethod = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]
redefineArrayMethod.forEach(item =>{
    const backupFunction = arrayPrototype[item];
    def(arrayMethods,item,function(){
        backupFunction.apply(this, arguments);
        console.log('数组执行了',item,'操作，值被修改为',this);
    },false);
})

const backupFunction = arrayPrototype[item];

backupFunction.apply(this, arguments);

class Observer{
    constructor(value) {
        //相当于  给拿到的对象  其中的__ob__绑定 值为thsi,在类中用this 表示取实例本身给__ob__赋值  最后一个enumerable为false 表示属性不参与for遍历
        def(value,'__ob__',this,false);
        if(Array.isArray(value)){
            Object.setPrototypeOf(value, arrayMethods);
        }
        this.walk(value);
    }
    walk(value) {
        for(let key in value){
            defineReactive(value,key);
        }
    }
}