Vue中的数据代理

最新推荐文章于 2024-08-05 09:07:37 发布

YonChao

最新推荐文章于 2024-08-05 09:07:37 发布

阅读量310

点赞数

分类专栏： Vue 文章标签： vue.js 前端 es6

本文链接：https://blog.csdn.net/weixin_44141172/article/details/121351954

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么是数据代理：

通过一个对象代理对另一个对象中属性的操作（读/写）

需求：

现在有一个person对象，有name和sex两种属性，添加一个age属性，并且使这个age属性与一个number的变量去关联。

这时候就使用Object的defineproperty方法

<body>
    <!-- 容器 -->
    <div id="root">

    </div>

    <script type="text/javascript">
        let number = 19
        let person = {
                name: "张三",
                sex: "男"
            }

        /* 给对象添加一个属性。这种方法是不可枚举不可遍历的。 
        如果加上一个属性就变成了可以列举的可遍历的。*/
        Object.defineProperty(person, "age", {
            //这个属性的值
            //value: 18,
            //是否可列举，默认为false
            enumerable:true,
            //是否可修改，默认值是false
            //writable:true,
            //是否可以删除，默认值是false
            configurable:true,

            /* 当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
            这时候这个属性不能有value属性和writable属性。
            */
            get(){
                return number;
            },
            /* 
            当有人修改这个属性值时，setter函数就会被调用。
             */
            set(value){
                number = value
            },
        })
        //打印对象。
        console.log(person)
        /* for in 既能遍历数组也能遍历对象。
        在此处遍历person对象不会显示出person的age属性 */
        for (const key in person) {
            console.log("@"+person[key])
        }
    </script>

</body>

数据代理在Vue中的使用：

<body>
    <!-- 什么是数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
    <div id="root">
        <h2>学校：{{name}}</h2>
        <h2>地址：{{address}}</h2>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            //这个data存在于vm._data中
            data () {
                return {
                    name:"清华大学",
                    address:"北京",
                }
            }
        })
    </script>
</body>

ps:Vue实例中的_data实际上Vue将data中的数据放到了vm中一份，并且放在了vm._data中。