手写vue（数组数据拦截）

一：source/vue/onserve/array.js

import {definReactive} from './Observer'
//把原生方法重构
//在原生方法外面包一层，在调用时添加判断，若是对象就监控，
let oldArryMethods = Array.prototype;
//拷贝数组原有方法
export let arryMethods = Object.create(oldArryMethods)

//需要拦截的原生方法
let methods = [
    "push","shift","pop","unshift","reverse","concat","sort",'splice',"split"
]
methods.forEach(m =>{
    //执行的方法
    arryMethods[m] = function(...args){
        console.log('拦截数组原生方法');
        // 调用原生方法
        let res =  oldArryMethods[m].apply(this,args);
        let inserted;


        switch(m){
            case 'push':
                    case 'unshift':
                            inserted = args;break;
                            case 'splice':
                                inserted = args.slice(2);//取新增的内容
                                default:
                                    break;
        }
        if(inserted){
            definReactive(this,this.length -1,inserted[0])
            console.log("数据拦截"+inserted,this);
            
        }
        return res;
    }
})

二.source/vue/Observe.js