Vue的数据代理

李广妮2022/8/27

数据代理

定义

通过vm对象来代理data对象中属性的操作（读/写）

好处

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

基本原理

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

代码

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

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

<body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h2>学校名称：{{name}}</h2>
   <h2>学校地址：{{address}}</h2>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  
  const vm = new Vue({
   el:'#root',
   data:{
    name:'尚硅谷',
    address:'宏福科技园'
   }
  })
 </script>