MVVM框架之响应式基本原理

136 阅读1分钟

首先有一个data,

data={
    name:"shuaige",
    age:19,
    female:"man"
}

要实现对data的修改就能即时相应,需要用到Object.defineProperty.


一、Object.defineProperty的使用

Object.defineProperty(obj,prop,descriptor)

其中obj为处理的对象,prop为需要定义或修改的属性,descriptor为属性描述符

属性描述符

configurable:ture; 属性是可以配置的,可多次通过Object.defineProperty去修改属性,且可以删除 enumerable:true; 属性可枚举的

此外,还有数据描述符和存取描述符,两者不可同时存在

数据描述符

value:xxx 设置属性的值 writable: true 可以修改属性的值

存取描述符

设置计算属性 get:function(){return xxx} //返回值会作为属性值 set:function(val){} //默认一个参数,将新参数给这个属性


二、数据的劫持

function observe(data){
    if(!data || typeof data !=="object") return;
    for(let key in data){
        let value=data[key];
        Object.defineProperty(data,key,{
            configurable:true,
            enumerable:true,
            get:function(){
                console.log(`get${value}`);
                return value;
            },
            set:function(newVal){
                console.log(`${value}=>${newVal}`);
                value=newVal;
            }
        })
    if(typeof value=== "object") observe(value);
    }
}