06.Object.defineProperty方法

Vue中重要的数据代理函数 ——Object.defineProperty函数介绍

1. 组成

Object.defineProperty(object,keyName,{})

<script>
let number =21;
    let person={
        name:'张三',
        sex:'男'
    }

    Object.defineProperty(person,'ages',{
        // value:18,
        // enumerable:true  默认添加的value是不可以 枚举 的，即不可以用来循环等
        // for(val in person){
        // console.log(val);
        //             }
        // writable:true 控制属性是否可以被修改，默认为FALSE
        // configurable:true 控制属性是否可以被删除，默认为FALSE
        //当有人读取person的ages属性时，get函数(getter)就会被调用，且返回值就是age的值
        get(){
            console.log("有人读取属性了");
            return number
        },
        //当有人修改person的ages属性时，set函数(setter)就会被调用,且会接收到修改的具体指
        set(value){
            console.log(value);
            number=value;//由于get方法中，将number返回当做ages的值，所以这里修改
        }
    })
    </script>
   

2. get方法说明

1.当使用此方法时不能再在配置对象中使用value

2.输出查看以….形式呈现

3.set方法

//当有人修改person的ages属性时，set函数(setter)就会被调用,且会接收到修改的具体指
        set(value){
            console.log(value);
            number=value;//由于get方法中，将number返回当做ages的值，所以这里修改
        }

小结

vue通过两个方法实现数据的沟通