vue数据代理-Object.defineProperty

首页->学习资料->web前端->vue教程->vue2 关键词: 发布时间:2024-01-04 00:23:37 浏览次数:475
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p11:数据代理-Object.defineProperty</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>

<body>
<!-- 准备好一个容器：模板-->

<script type="text/javascript">
    let number = 20;
    let person = {//数据
        name: 'hurong',
    }
    //创建vue实例
    const vm = new Vue({
        data: person
    });

    //增加一个age属性,需在控制台测试
    Object.defineProperty(person, 'age', {
        // value: number,
        // enumerable: true,//是否可枚举，默认false
        // writable: true,//是否可修改,默认false
        // configurable: true,//是否可删除,默认false
        //以上不能和get(),set()同时开启

        get() {
            console.log('有人读取了age')
            return number
        },
        set(value) {
            console.log('有人设置了age')
            number = value;
        }
    })

    //数据代理：一个对像去读写另一个对像的值,效果类似于指针
    let person2 = {
        name: 'tom'
    }
    Object.defineProperty(person2, 'name', {
        get() {
            return person.name;
        },
        set(value) {
            person.name = value;
        }
    })

    //data数据存储于vm._data中 vm._data===data,修改_data中的数据相当于修改data(指针效果),页面效果也会变

</script>
</body>
</html>
赞:(0)
踩:(0)