Vue 2.0中的响应式原理实现

针对vue 2.0中的响应式原理进行仿写

主要原理：使用Object.defineProperty方法给对象的每一个属性注册 get 和set方法，在set方法中执行render方法进行页面重新渲染

let obj = {
    name : '1',
    age : 12,
    card : {
        card1:'c1',
        card2:'c2'
    }
}
//定义响应式，此方法用来对某一对象进行注册set和get方法操作
let defineReactive = (obj,key,value)=>{
    Object.defineProperty(obj,key,{
        get(){
            console.log("读了");
            return value
        },
        set(newVal){
            console.log("写了");
            if (value===newVal) {
                return;
            }
            value = newVal
            render();
        }
    });
}
//用来观察对象，并对改对象的每一个属性执行定义响应式方法
let observer = (obj)=>{
    for (const key in obj) {
        //如果属性为对象，进行递归操作遍历
        if(typeof obj[key] ==='object'){
            observer(obj[key]);
        }else{
            defineReactive(obj,key,obj[key]);
        }
    }
}
//模拟页面渲染方法
let render = ()=>console.log("rendered!");
//观察对象obj
observer(obj);

vue 2.0中的响应式的缺陷（Object.defineProperty的缺陷）

1.无法对对象的新增和删除进行监听
2.无法对不存在的数组的索引进行监听
3.defineReactive函数中使用了递归的方法对对象进行遍历