Vue数据代理

柳衣白卿

已于 2022-09-18 22:37:11 修改

阅读量420

点赞数 1

分类专栏： Vue 文章标签： vue

于 2022-05-24 10:29:54 首次发布

本文链接：https://blog.csdn.net/qq_50864152/article/details/124941598

版权

Vue 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

数据代理

数据代理：通过一个对象代理对另一个对象属性的操作
案例：通过操作obj2的属性来操作obj1的属性

<script>
   let obj1 = {x:18}
   let obj2 = {y:20}
  
   Object.defineProperty(obj2, "x", {
      
       //简写
       get(){
           return obj.x
       },
       //简写
       set(value){
           obj.x = value
       }
   })
   
</script>

2. Vue为什么要做数据代理?

1. 假设Vue没做数据代理

因为data不能被访问，所以必须通过vm身上的_data 来访问data中的数据
_data中的数据就是data中的数据

<body>
    <div id="root">
        <!--如果不做数据代理-->
        <h2>名字:{{_data.name}}</h2>
        <h2>地址:{{_data.address}}</h2>
    </div>
</body>

<script type="text/javascript">

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'shaka',
            address: '辽宁东北'
        }
    })
</script>

2. 实例情况(Vue做了数据代理)

Vue让vm代理对data对象中属性的操作（读/写），因此vm身上出现了data中的数据
目的：简化编码，能够通过vm直接访问data中的数据

vm: Vue实例对象

<body>
    <div id="root">
        <!--如果不做数据代理-->
        <h2>名字:{{name}}</h2>
        <h2>地址:{{address}}</h2>
    </div>
</body>

<script type="text/javascript">

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'shaka',
            address: '辽宁东北'
        }
    })
</script>