vue2、vue3数据响应原理

数据响应原理

Object.defineProperty

Vue2数据响应核心是使用了Object.defineProperty方法

/* 不支持ie8以及以下 */
        let obj={
            name:'zhangsan',
            age:30
        }
        // Object.defineProperty(obj,'name',{
        //     /* configurable 属性是否能被删除，默认为true可以被删除 */
        //     configurable:false,

        //     /* value就是对象属性的默认值，优先级比定义的优先级大
        //     value:包含这个属性的数据值。默认值为undefined */

        //     /* writable:表示能否修改属性的值。默认值为true为false则不能被修改，变成只读属性 */
        //     writable:false,

        //     /* 表示能否通过for in循环访间属性，默认值为true */
        //     enumerable:false
        // })
       /*  delete obj.name
        document.write(obj.name); */
        Object.defineProperties(obj,{
            name:{
                enumerable:true
            },
            age:{
                enumerable:false
            }
        })
        for(var i in obj){
            document.write(obj[i]);
        }
        
        -------------------------------------------------------------
        
        

vue3原理proxy

        let p={
        name:'zhangsan',
        age:30
    }
    let p2={
        get(obj,key){
            return obj[key]
        },
        set(obj,key,val){
            console.log('key是'+key+'值是'+obj[key]+'要被修改为'+val);
            obj[key]=val
        }
    }
    /* p代表源对象，p2代表需要操作的对象 */
    let proxy1=new Proxy(p,p2)
    /* 测试get是否能够拦截成功 (可以)*/
    console.log(proxy1);
    /* document.write(proxy1.name+'<br>');
    document.write(proxy1.age+'<br>');
    document.write(proxy1.abc+'<br>'); */
    /* 测试set是否能够成功拦截 (可以)*/
    proxy1.name='aaa'
    document.write(proxy1.name+'<br>');