Vue中的数据代理

最新推荐文章于 2022-11-09 22:15:50 发布

HeX_7

最新推荐文章于 2022-11-09 22:15:50 发布

阅读量161

点赞数

分类专栏： # Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/hex_7/article/details/124340336

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1.Vue中的数据代理：

通过vm对象来代理data对象中属性的操作

2.Vue中数据代理好处：

更加方便的操作data中的数据

3.基本原理：

通过Object.definePropery（）把data对象中所有属性添加到vm上

在getter/setter内部去操作（读/写）data中对应的属性

什么是数据代理：

<body>
    <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
    <script>
    var obj = {
            x : 100
        }
    var obj2 = {
            y : 200
        }

        Object.defineProperty(obj2,'x',{
            get:function(){
                return obj.x;
            },
            set:function(value){
                obj.x = value;
            }
        })

    </script>

</body>

Vue中的数据代理

<body>
<!-- 
    1.Vue中的数据代理：
        通过vm对象来代理data对象中属性的操作
    2.Vue中数据代理好处：
        更加方便的操作data中的数据
    3.基本原理：
        通过Object.definePropery（）把data对象中所有属性添加到vm上
        在getter/setter内部去操作（读/写）data中对应的属性
 -->
    <div id="root">
        <h2>学校名称：{{ name }}</h2>
        <h2>学校地址：{{ address }}</h2>
    </div>

    <script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;

    
    var vm = new Vue({
        el:"#root",
        data:{              //vm._data === data
            name:'尚硅谷',
            address:'北京'
        }
    })

    </script>
</body>