Vue-7、Vue中数据代理

1、回顾Object.defineProperty

javascript 复制代码

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据代理，回顾 Object.defineProperty</title>
</head>
<body>
<script type="text/javascript">
    let person = {
        name:'张三',
        sex:'男',
        age:18
    };
    console.log(Object.keys(person));
    for (let key in person){
        console.log('@',person[key])
    }
    console.log(person);
</script>
</body>
</html>

Object.defineProperty所增加的属性

javascript 复制代码

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据代理，回顾 Object.defineProperty</title>
</head>
<body>
<script type="text/javascript">
    let person = {
        name:'张三',
        sex:'男',
        //age:18
    };
    Object.defineProperty(person,'age',{
        value:18
    });
    console.log(Object.keys(person));
    
    for (let key in person){
        console.log('@',person[key])
    }
    console.log(person);
</script>
</body>
</html>

enumerable :true 控制属性是否可以枚举，默认值是false

javascript 复制代码

	Object.defineProperty(person,'age',{
        value:18,
        enumerable:true,//控制属性是否可以枚举，默认值是false
    });

writable:true, 控制属性是否可以修改。默认值是false

javascript 复制代码

 Object.defineProperty(person,'age',{
        value:18,
        enumerable:true,//控制属性是否可以枚举，默认值是false
        writable:true, // 控制属性是否可以修改。默认值是false
    });

configurable:true,//控制属性是否可以被删除，默认是false

javascript 复制代码

Object.defineProperty(person,'age',{
        value:18,
        enumerable:true,//控制属性是否可以枚举，默认值是false
        writable:true, // 控制属性是否可以修改。默认值是false
        configurable:true,//控制属性是否可以被删除 ，默认是false
    });

getter 函数使用

javascript 复制代码

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据代理，回顾 Object.defineProperty</title>
</head>
<body>
<script type="text/javascript">
    let number = 18;
    let person = {
        name:'张三',
        sex:'男',
    };
    Object.defineProperty(person,'age',{
        //当有人读取person的age属性是，get函数(getter)就会被调用，且返回值就是age的值
        get:function () {
            return number
        }

    });
    console.log(Object.keys(person));
    for (let key in person){
        console.log('@',person[key])
    }
    console.log(person);
</script>
</body>
</html>

简写形式

javascript 复制代码

 Object.defineProperty(person,'age',{
        //当有人读取person的age属性是，get函数(getter)就会被调用，且返回值就是age的值
        get() {
            return number
        }

    });

setter 函数使用

javascript 复制代码

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>数据代理，回顾 Object.defineProperty</title>
</head>
<body>
<script type="text/javascript">
    let number = 18;
    let person = {
        name:'张三',
        sex:'男',
    };
    Object.defineProperty(person,'age',{
        //当有人读取person的age属性是，get函数(getter)就会被调用，且返回值就是age的值
        get() {
            console.log('有人读取age属性了');
            return number
        },
        //当有人修改person的age属性时。set(setter)就会被调用  且会收到修改的具体值
        set:function(value){
            console.log('有人修改了age的值，且值是',value);
            number = value;
        }
    });
    console.log(Object.keys(person));
    for (let key in person){
        console.log('@',person[key])
    }
    console.log(person);
</script>
</body>
</html>

2、vue中的数据代理

数据代理：通过一个对象代理对另外一个对象属性操作（读/写）

vm._data=options.data=data