vue2.0响应式原理的应用

最新推荐文章于 2024-10-01 20:12:28 发布

小白Hard

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量137

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/lly193426/article/details/109167544

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

监测属性的变化

function observe(target){
    if(typeof target !=="object" || target==null){
        return target;
    }
    //对对象中的每一个属性进行监视
    for(let key in target){
        defineReactive(target,key,target[key]);
    }
}
function defineReactive(target,key,value){
    Object.defineProperty(target,key,{
        get(){
            return value;
        },
        set(newVal){
            if(newVal!==value){
                updateView();
                value=newVal;
            }
        }
    })
}
function updateView(){
    console.log("更新视图");
}
let data={name:'lly'}
observe(data);
data.name="lingyan";

如果target的属性也是一个对象：

function observe(target){
    if(typeof target !=="object" || target==null){
        return target;
    }
    //对对象中的每一个属性进行监视
    for(let key in target){
        defineReactive(target,key,target[key]);
    }
}
function defineReactive(target,key,value){
    Object.defineProperty(target,key,{
        get(){
            return value;
        },
        set(newVal){
            if(newVal!==value){
                observe(newVal);
                updateView();
                value=newVal;
            }
        }
    })
}
function updateView(){
    console.log("更新视图");
}
let data={name:{m:10}}
observe(data);
data.name={m:20};
data.name.m=30;

视图更新两次

如果属性值也是一个对象：

function observe(target){
    if(typeof target !=="object" || target==null){
        return target;
    }
    //对对象中的每一个属性进行监视
    for(let key in target){
        defineReactive(target,key,target[key]);
    }
}
function defineReactive(target,key,value){
    observe(value);
    Object.defineProperty(target,key,{
        get(){
            return value;
        },
        set(newVal){
            if(newVal!==value){
                observe(newVal);
                updateView();
                value=newVal;
            }
        }
    })
}
function updateView(){
    console.log("更新视图");
}
let data={name:{m:{n:10}}}
observe(data);
data.name.m={n:20};
data.name.m.n=30;

视图也更新两次

数组的监测

let oldArrayPrototype=Array.prototype;
let proto=Object.create(oldArrayPrototype);
['push','shift','unshift','splice'].forEach(method=>{//函数劫持 把函数进行重写，内部会继续调用老的方法
    proto[method]=function (){
        updateView();
        oldArrayPrototype[method].call(this,...arguments);
    }
    
})
function observe(target){
    if(typeof target !=="object" || target==null){
        return target;
    }
    if(Array.isArray(target)){
        //浏览器不支持的话，还是可以使用如下：
        Object.setPrototypeOf(target,proto);
        //target.__proto__=proto;
        for(let i=0;i<target.length;i++){
            observe(target[i]);
        }
    }
    //对对象中的每一个属性进行监视
    for(let key in target){
        defineReactive(target,key,target[key]);
    }
}
function defineReactive(target,key,value){ //响应式系统
    observe(value);
    Object.defineProperty(target,key,{
        get(){
            return value;
        },
        set(newVal){
            if(newVal!==value){
                observe(newVal);
                updateView();
                value=newVal;
            }
        }
    })
}
function updateView(){
    console.log("更新视图");
}
let data={name:[1,2,3]}
observe(data);
data.name.push(5);