Vue-7、Vue中数据代理-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue-7、Vue中数据代理。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、回顾Object.defineProperty

<!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>

Vue-7、Vue中数据代理,vue,vue.js,javascript,前端
Object.defineProperty所增加的属性

<!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>

Vue-7、Vue中数据代理,vue,vue.js,javascript,前端
enumerable :true 控制属性是否可以枚举，默认值是false

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

Vue-7、Vue中数据代理,vue,vue.js,javascript,前端
writable:true, 控制属性是否可以修改。默认值是false

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

Vue-7、Vue中数据代理,vue,vue.js,javascript,前端
configurable:true,//控制属性是否可以被删除，默认是false

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

Vue-7、Vue中数据代理,vue,vue.js,javascript,前端

getter 函数使用

<!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>

Vue-7、Vue中数据代理,vue,vue.js,javascript,前端
简写形式

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

    });

setter 函数使用

<!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>