数据代理

Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
优点：
方便操作data中的数据

基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上，同时指定getter/setter，在getter/setter内部去操作（读/写）data中对应的属性

（1）数据代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
</head>
<body>
    <!-- 通过一个对象代理另一个对象中属性的操作 -->
    <script type="text/javascript">
        let obj = {x:100}
        let obj1 = {y:200}

        Object.defineProperty(obj1, 'x', {
            get() {
                return obj.x
            },
            set(value) {
                obj.x = value
            }
        })
    </script>
</body>
</html>

（2）Vue中的数据代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>你好，{{name}}</h2>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    /* let data = {
        name: '孙笑川'
    }

    //创建Vue实例
    const vm = new Vue({
        el: '#root',
        //vm._data = options.data = data
        //vm._data === data  true
        data
    }) */

    const vm = new Vue({
        el: '#root',
        data: {
            name: '孙笑川'
        }
    })
</script>
</body>
</html>

（3）Object.defineProperty方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>

<script type="text/javascript">
    let num = 33;
    let person = {
        name: '孙笑川'
    }

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

        //当读取age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
            console.log("age属性被读取了");
            return num;
        },

        //当修改age属性时，set函数(setter)就会被调用，同时收到修改的具体值
        set(value) {
            console.log("age属性被修改了，值为：", value);
            num = value
        },
    })

    console.log(person)
</script>
</body>
</html>

评论 (0)