搭建rollup打包环境

1. 初始化package.json文件
2. 打包文件的配置 rollup.config.js

数据劫持

检测data中的对象
1、对属性进行遍历 2、使用的是Object.defineProperty只能对对象中的一个属性进行劫持 3、对data中深层次的对象进行遍历 使用递归

export function observer(data){
    if(typeof data!='object' ||data==null){
        return data
    }
    return new Observer(data);
}
class Observer{
    constructor(value){
        this.walk(value)   
    }
    // 遍历对象的属性
    walk(data){
        //拿到对象上所有的key
       let keys=Object.keys(data)
        for(let i=0;i<keys.length;i++){
            let key=keys[i],value=data[key];
            defineReactive(data,key,value)
        }
    }
};
//对对象的属性进行劫持  Object.defineProperty
function defineReactive(data,key,value){
    observer(value)
    Object.defineProperty(data,key,{
        get(){
            return value||'none'
        },
        set(newValue){
            if(newValue==value)  return
            observer(value)
            value=newValue
        }
    })
}

对data中的数组的劫持 {list:[1,2,3],arr:[2,34]},采用的方式是函数劫持，重写数组的方法。重写push等数组的方法。 构造函数中 判断是不是数组 是的话就进行数组的方法的劫持 arr.js中 重写 数组的方法，获取原来的数组方法