Vue学习之-数据代理-Object.defineProperty

1.所谓数据代理（也叫数据劫持），指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty()。

 

Object.defineProperty：增加属性 (默认下不能被修改，删除，枚举)

<script type="text/javascript">
    let person={
        name: 'ykw',
        age: "18"
    }
    Object.defineProperty(person,'sex',{
        value:'男'

    })
    console.log(person)
</script>

控制台输出：sex未添加的属性，所以比较淡，同时不可枚举，遍历时没有这个属性。

如果要遍历可以添加,修改，删除，枚举.

Object.defineProperty(person,'sex',{
        value:'男',
        enumerable:true,//控制属性是否枚举，就是展示遍历
        writable:true,//控制属性可以被修改，默认为false
        configurable:true//控制属性可以被删除
    })

3.get函数（getter）

<script type="text/javascript">
    let number=18
    let person={
        name: 'ykw',
        age: "18"
    }
    Object.defineProperty(person,'sex',{
        value:'男',
        enumerable:true,//控制属性是否枚举，就是展示遍历
        writable:true,//控制属性可以被修改，默认为false
        configurable:true,//控制属性可以被删除

        //当展示这个增加的属性时自动被调用
        get:function (){
            return number
        }
    })
    console.log(person)
</script>

set函数:

//当有人修改增加这个属性，只包含被Object.defineProperty添加的属性时就会调用

<script type="text/javascript">
    let number=18
    let person={
        name: 'ykw',
        age: "18"
    }
    Object.defineProperty(person,'sex',{
        // value:'男',
        // enumerable:true,//控制属性是否枚举，就是展示遍历
        // writable:true,//控制属性可以被修改，默认为false
        // configurable:true,//控制属性可以被删除

        //加入读取增加的属性时自动被调用
        get:function (){
            return number
        },
        //当有人修改就会调用
        set(value){
            alert(value)
        number=value
        }
    })
    console.log(person)
</script>

二：数据代理：通过一个对象代理对另一个对象属性就行读写

所谓数据代理（也叫数据劫持），指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty()。

 三：Vue中的数据代理

基本原理：

        通过Object.defineProperty把data的所有属性添加到vm上，同时为每一个添加到的属性都有getter和setter，在getter/setter中去读写data中的属性。